phlex-reactive 0.14.4 → 0.15.1

data/app/javascript/phlex/reactive/runtime.js

@@ -36,6 +36,7 @@ import * as devtoolsFeature from "phlex/reactive/features/devtools"
 import * as hintsFeature from "phlex/reactive/features/hints"
 import * as deferFeature from "phlex/reactive/features/defer"
 import * as sortableFeature from "phlex/reactive/features/sortable"
+import * as presenceFeature from "phlex/reactive/features/presence"
 
 // phlex/reactive/runtime — the reactive controller WITHOUT its feature
 // modules (issue #275): the code both client entries share. It is not an
@@ -199,6 +200,8 @@ export function registerReactiveStreamRender() {
   if (typeof document === "undefined" || typeof document.addEventListener !== "function") return
   streamRenderRegistered = true
   document.addEventListener("turbo:before-stream-render", (event) => {
+    streamIntoRoots(event)
+    streamModals(event)
     // The opt-in entry sees every stream (it may hold one for a module the
     // incoming content needs); with no entry hook, a loaded effects module
     // wraps the stream directly — in the default entry, always.
@@ -210,6 +213,149 @@ export function registerReactiveStreamRender() {
 // The names this registration had while it was two listeners.
 export { registerReactiveStreamRender as registerReactiveDismiss, registerReactiveStreamRender as registerReactiveEffects }
 
+// --- A stream into a connected root (issue #356) ---
+// A morph of a root makes it re-read its feature markers (#boundRootMorph); a
+// stream that renders INTO it — append, prepend or update of the root or a
+// child, before, after or replace of a child — fires neither a lifecycle nor
+// a morph of the root, so a marker it brings was never connected. The roots
+// a stream renders into are resolved here, before anything (effects, the opt-in
+// entry's hold) wraps Turbo's render; once that render has run, each one still
+// connected is told (STREAMED, not bubbling: an outer root's content is not
+// its own). The root re-runs its connected features' seeds and connects what
+// the new content needs, in both entries.
+const STREAMED = "reactive:streamed"
+
+function streamIntoRoots(event) {
+  const detail = event.detail
+  const render = detail?.render
+  const stream = detail?.newStream ?? event.target
+  const action = stream?.getAttribute?.("action")
+  const into = /^(append|prepend|update)$/.test(action)
+  if (typeof render !== "function" || !(into || /^(before|after|replace)$/.test(action))) return
+  const id = stream.getAttribute("target")
+  const selector = stream.getAttribute("targets")
+  const roots = new Set()
+  for (const target of id ? [document.getElementById(id)] : selector ? document.querySelectorAll(selector) : []) {
+    const root = (into ? target : target?.parentElement)?.closest?.('[data-controller~="reactive"]')
+    if (root) roots.add(root)
+  }
+  if (roots.size === 0) return
+  detail.render = async (el) => {
+    await render(el)
+    for (const root of roots) if (root.isConnected) root.dispatchEvent(new Event(STREAMED))
+  }
+}
+
+// --- Modal dialogs (issue #365) ---
+// show_modal / close_dialog reach the browser's own modal dialog: the top
+// layer, the focus trap, ::backdrop, Escape and focus restored to the opener.
+// A dialog the SERVER renders open with data-reactive-modal becomes modal as
+// soon as the client sees it: at a root's connect (a full page, a replaced
+// root), after a morph of a root or of the page, and after a stream whose
+// content holds a dialog. Duck-typed on tagName (the submitFormFor precedent:
+// fake-node and test friendly).
+function isDialog(el) {
+  return el?.tagName === "DIALOG" && typeof el.showModal === "function"
+}
+
+// `:modal` is the only way to tell a modal dialog from one opened with the
+// `open` attribute. An engine that does not know the pseudo-class throws a
+// SyntaxError; it then counts as not modal (show_modal reopens it modally).
+function isModal(dialog) {
+  try {
+    return dialog.matches(":modal")
+  } catch {
+    return false
+  }
+}
+
+function showModal(el) {
+  if (!isDialog(el)) {
+    // Said where a zero-target op is (issue #237): under verbose_errors or debug.
+    if (el?.closest?.('[data-reactive-verbose="true"], [data-reactive-debug="true"]')) {
+      console.warn(`[phlex-reactive] show_modal targets a <dialog>, not <${el.localName}> — skipped`)
+    }
+    return
+  }
+  if (!el.isConnected || isModal(el)) return
+  // showModal() throws on a dialog already open non-modally: close it first,
+  // in the same task, so nothing paints in between.
+  if (el.open) el.close()
+  el.showModal()
+}
+
+function closeDialog(el) {
+  if (isDialog(el) && el.open) el.close()
+}
+
+// Make every open dialog[data-reactive-modal] in `scope` modal — `scope` itself
+// too, for a root that is the dialog.
+function upgradeModals(scope) {
+  const sel = "dialog[data-reactive-modal]"
+  const dialogs = [...(scope?.querySelectorAll?.(sel) ?? [])]
+  if (scope?.matches?.(sel)) dialogs.push(scope)
+  for (const dialog of dialogs) {
+    if (dialog.open && !isModal(dialog)) showModal(dialog)
+  }
+}
+
+// After a stream whose content holds a dialog has rendered, upgrade the page's
+// marked dialogs. Document-wide: a replace's target is gone by then.
+function streamModals(event) {
+  const detail = event.detail
+  const render = detail?.render
+  const stream = detail?.newStream ?? event.target
+  if (typeof render !== "function" || !stream?.querySelector?.("template")?.content?.querySelector?.("dialog")) return
+  detail.render = async (el) => {
+    await render(el)
+    upgradeModals(document)
+  }
+}
+
+let modalsRegistered = false
+
+export function registerReactiveModals() {
+  if (modalsRegistered) return
+  if (typeof document === "undefined" || typeof document.addEventListener !== "function") return
+  modalsRegistered = true
+  // A morph of a root (a reply or broadcast morph, a page refresh) may have
+  // inserted an open marked dialog or opened one; a page morph covers dialogs
+  // outside any root.
+  document.addEventListener("turbo:morph-element", (event) => {
+    if (event.target?.matches?.('[data-controller~="reactive"]')) upgradeModals(event.target)
+  })
+  document.addEventListener("turbo:morph", () => upgradeModals(document))
+  // A morph that removes `open` from a modal dialog (the server now renders it
+  // closed): close() it instead, which leaves the top layer, ends the page's
+  // inertness and restores focus. Removing the attribute alone left all that
+  // in place under the older spec text, and close() is a no-op once `open` is
+  // gone — so the removal is cancelled and close() removes it. Idiomorph asks
+  // "remove" for EVERY attribute of the old element, kept or not, and that ask
+  // carries no new element: whether `open` is really leaving is read from the
+  // element morph's new render, which comes first.
+  const closing = new WeakSet()
+  document.addEventListener("turbo:before-morph-element", (event) => {
+    const el = event.target
+    const next = event.detail?.newElement
+    if (!isDialog(el) || !next) return
+    if (next.hasAttribute?.("open")) closing.delete(el)
+    else closing.add(el)
+  })
+  document.addEventListener("turbo:before-morph-attribute", (event) => {
+    const el = event.target
+    const detail = event.detail
+    if (detail?.attributeName !== "open" || detail.mutationType !== "remove") return
+    if (!closing.has(el) || !el.open || !isModal(el)) return
+    closing.delete(el)
+    event.preventDefault()
+    el.close()
+  })
+}
+
+export function __resetReactiveModalsForTest() {
+  modalsRegistered = false
+}
+
 // For the opt-in entry: what to do with a stream before its render — hold it
 // for a module the incoming content needs. `handle(event, effects)` gets the
 // loaded effects module (or undefined) and wraps the stream with it itself.
@@ -237,6 +383,66 @@ export function __resetReactiveStreamRenderForTest() {
 //                            for the attribute AND the property. Nothing else
 //                            (a root's token, a field's class) is held.
 // data-reactive-morph-value on a field lets the morph write it while focused.
+// --- An engine without contenteditable="plaintext-only" (issue #355) ---
+// reactive_editable renders contenteditable="plaintext-only": the browser
+// itself then pastes plain text and inserts "\n" for Enter. An engine without
+// it reads the value as INVALID — the element is not editable, cannot even be
+// focused — so there every reactive editable is switched to "true" (and the
+// bindings feature does the plain-text paste itself). However it reaches the
+// page: present at load, appended by a stream into a root that is already
+// connected, loaded in a frame, written back by a morph of an unfocused
+// editable, or made reactive by a morph. One observer, only in such an engine; elsewhere the probe is all
+// that runs. Detected once per page.
+let plaintextOnly
+let plaintextObserver = null
+const PLAINTEXT_EDITABLE = "[data-reactive-editable][contenteditable=plaintext-only]"
+
+function plaintextSupported() {
+  if (plaintextOnly === undefined) {
+    try {
+      const probe = document.createElement("div")
+      probe.contentEditable = "plaintext-only"
+      plaintextOnly = probe.contentEditable === "plaintext-only"
+    } catch {
+      plaintextOnly = false
+    }
+  }
+  return plaintextOnly
+}
+
+function makeEditable(el) {
+  if (el.matches?.(PLAINTEXT_EDITABLE)) el.setAttribute("contenteditable", "true")
+  el.querySelectorAll?.(PLAINTEXT_EDITABLE).forEach(makeEditable)
+}
+
+export function registerReactivePlaintext() {
+  // (No element factory, no page to observe: never probe a stub document.)
+  if (plaintextObserver || typeof document === "undefined" || typeof document.createElement !== "function") return
+  if (plaintextSupported()) return
+  makeEditable(document)
+  plaintextObserver = new MutationObserver((records) => {
+    for (const record of records) {
+      if (record.type === "attributes") makeEditable(record.target)
+      else record.addedNodes.forEach(makeEditable)
+    }
+  })
+  plaintextObserver.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    // (a morph can also make an existing plaintext-only element reactive)
+    attributeFilter: ["contenteditable", "data-reactive-editable"],
+  })
+}
+
+// For tests: what the probe answers (undefined probes again), with no
+// observer installed.
+export function __setReactivePlaintextOnlyForTest(value) {
+  plaintextObserver?.disconnect()
+  plaintextObserver = null
+  plaintextOnly = value
+}
+
 let morphFocusRegistered = false
 
 //
@@ -244,8 +450,8 @@ let morphFocusRegistered = false
 // CHILDREN: a focused one keeps them (text and caret) while every attribute
 // still morphs — copied here from the render, then the element's morph is
 // cancelled (cancelling is all-or-nothing in Idiomorph). Its contenteditable
-// stays as it is: the bindings may have downgraded it for an engine without
-// plaintext-only. Every morph of an editable, held or not, records the
+// stays as it is: the runtime switches it to "true" in an engine without
+// plaintext-only (registerReactivePlaintext, #355). Every morph of an editable, held or not, records the
 // render's text as its SERVER TEXT (the Escape revert, the dirty baseline).
 function holdsTypedValue(el) {
   return (
@@ -486,6 +692,8 @@ export function registerReactiveActions() {
   registerReactiveDefer()
   registerReactiveStreamRender()
   registerReactiveMorphFocus()
+  registerReactiveModals()
+  registerReactivePlaintext()
   registerReactiveOffline()
   registerReactiveDev()
 }
@@ -742,6 +950,11 @@ const CLIENT_OPS = Object.freeze({
   focus: (el) => el.focus?.(),
   focus_first: (el) => firstFocusable(el)?.focus?.(),
 
+  // Modal dialog ops (issue #365): HTMLDialogElement#showModal / #close.
+  // ACTOR-ONLY like focus (BROADCAST_REFUSED_OPS server-side).
+  show_modal: (el) => showModal(el),
+  close_dialog: (el) => closeDialog(el),
+
   // Text op (issue #159): set textContent — XSS-safe by construction (never
   // innerHTML), strictly less powerful than set_attr. Change-guarded like
   // #mirrorText. With global: true it is the cross-root text escape: paint a
@@ -766,6 +979,13 @@ const CLIENT_OPS = Object.freeze({
     }
   },
 
+  // Write this tab's presence state (issue #358) through the root's
+  // presence_set action. The feature warns outside a reactive_presence root.
+  presence: (el, args) =>
+    __SPLIT__
+      ? withFeature("presence", (presence) => presence.set(el, args.state))
+      : presenceFeature.set(el, args.state),
+
   // Dispatch a bubbling CustomEvent (issue #96). RAW element.dispatchEvent — the
   // controller SHADOWS Stimulus's this.dispatch helper, so it must not be used.
   dispatch: (el, args) => {
@@ -922,9 +1142,13 @@ function parseOps(raw) {
 // record(s) whose descriptor matches the firing event: event.type, the key
 // filter, and window-boundness.
 
-// Stimulus's default keyMappings (letters and digits map to themselves). A
+// Stimulus's default keyMappings (letters and digits map to themselves), plus
+// delete and backspace (issue #366): Stimulus lacks those two, so a shortcut
+// naming one binds a bare keydown and only shortcutApplies matches it. A
 // custom Stimulus schema is not mirrored — an unknown filter never matches.
 const KEY_FILTER_MAP = Object.freeze({
+  backspace: "Backspace",
+  delete: "Delete",
   enter: "Enter",
   tab: "Tab",
   esc: "Escape",
@@ -963,6 +1187,25 @@ function keyFilterMatches(filter, event, keyMappings) {
   return typeof key === "string" && key.toLowerCase() === event.key.toLowerCase()
 }
 
+// Issue #357: a shortcut: ("mod+z", or { keys, inEditable }) is a window
+// keydown whose `mod` is meta on Apple platforms and ctrl elsewhere. Ruby
+// renders a meta twin and a ctrl twin; Stimulus filters the key, and this
+// decides whether the twin that fired is this platform's and whether the
+// target is one the user is typing in. Either miss is a complete no-op. A
+// delete/backspace chord (issue #366) has no twins and no Stimulus filter:
+// its bare keydown hears every key, and this check alone picks the chord.
+// (Stimulus typecasts a digit shortcut, "1", to a number: hence String().)
+const shortcutKeys = (spec) => (spec && typeof spec === "object" ? spec.keys : String(spec))
+// A shortcut record keeps a bare `on: "keydown"`, so bindingMatches lets every
+// keydown through and this check, per record, picks the chord that fired.
+function shortcutApplies(spec, event, keyMappings) {
+  const target = event.target
+  if (spec?.inEditable !== true && (target?.isContentEditable || /^(input|textarea|select)$/.test(target?.localName)))
+    return false
+  const mod = /[Mm]ac|iP/.test(navigator.userAgentData?.platform ?? navigator.platform) ? "meta" : "ctrl"
+  return keyFilterMatches(shortcutKeys(spec).replace(/^mod\+/, `${mod}+`), event, keyMappings)
+}
+
 // Parse data-reactive-ops-param into binding records. Stimulus typecasts a
 // lone record to an object; several records stay a string (JSON.parse fails on
 // the join) and are split here. A LEGACY [[op, args]] list (array or JSON
@@ -1283,6 +1526,11 @@ function sortableNeeded(root) {
   return Boolean(root.matches?.(lists) || root.querySelector?.(lists))
 }
 
+// Presence (issue #358): the root is a reactive_presence roster.
+function presenceNeeded(root) {
+  return root.getAttribute?.("data-reactive-presence") != null
+}
+
 const PRODUCTION_FEATURES = [
   // (Its `waiting` hook is the opt-in entry's: core.js.) The draft restore
   // writes what a request reads, so it gates.
@@ -1295,6 +1543,9 @@ const PRODUCTION_FEATURES = [
   ["compute", [computeNeeded, null, null, true]],
   // Nothing it does at connect is read by a request: it never gates.
   ["sortable", [sortableNeeded, null]],
+  // Its announce is a request of its own; nothing it does at connect is read
+  // by another request: it never gates.
+  ["presence", [presenceNeeded, null]],
   [
     // Stream effects and dismissing flashes are document-level: the module
     // has no connect. A root that DECLARES an effect only gets it fetched
@@ -1458,7 +1709,7 @@ function featureTimeoutMs() {
 export function reactiveFeatureNames() {
   return __SPLIT__
     ? [...FEATURES.keys()]
-    : ["persist", "defer", "form", "bindings", "compute", "sortable", "effects", "hints", "devtools"]
+    : ["persist", "defer", "form", "bindings", "compute", "sortable", "presence", "effects", "hints", "devtools"]
 }
 
 export function __setReactiveFeatureForTest(name, needs, load, waiting, gates) {
@@ -1481,6 +1732,7 @@ export function __loadReactiveFeatureForTest(name) {
     bindings: bindingsFeature,
     compute: computeFeature,
     sortable: sortableFeature,
+    presence: presenceFeature,
     effects: effectsFeature,
     hints: hintsFeature,
     devtools: devtoolsFeature,
@@ -1534,6 +1786,7 @@ const FORM = 4
 const BINDINGS = 8
 const COMPUTE = 16
 const SORTABLE = 32
+const PRESENCE = 64
 
 // The default entry's features are part of this file: install them now, as
 // the opt-in entry does when one arrives.
@@ -1755,7 +2008,7 @@ export default class extends Controller {
   #featureTurns = new Map() // name -> settles once that feature has had its turn to connect
   #featureEpoch = 0
   #featureHandle // the `core` handle features receive, built on first use
-  // The default entry (issue #305): one bit per feature, PERSIST … SORTABLE —
+  // The default entry (issue #305): one bit per feature, PERSIST … PRESENCE —
   // asked for (its marker read true) and connected on this connection.
   #featuresAsked = 0
   #featuresOn = 0
@@ -1802,15 +2055,20 @@ export default class extends Controller {
     // The same listener hears an editable being focused (issue #351): a stream
     // can append a root's first reactive_editable without morphing the root,
     // and its keys and paste need the bindings feature before anything is
-    // typed into it.
+    // typed into it. And it hears a stream that rendered into the root
+    // (STREAMED, issue #356): the features already connected re-run their
+    // seeds first (a morph's own listeners do that for a morph), then what the
+    // new content needs connects.
     if (this.element.getAttribute?.("data-reactive-token-value") != null || deferNeeded(this.element)) {
       this.#boundRootMorph = (event) => {
         if (event.type === "focusin" ? !event.target.hasAttribute?.("data-reactive-editable") : event.target !== this.element) return
+        if (event.type === STREAMED) this.#reseed()
         if (__SPLIT__) this.#loadFeatures(true)
         else this.#connectFeaturesNow(true)
       }
       this.element.addEventListener?.("turbo:morph-element", this.#boundRootMorph)
       this.element.addEventListener?.("focusin", this.#boundRootMorph)
+      this.element.addEventListener?.(STREAMED, this.#boundRootMorph)
     }
 
     // Feature modules (issue #275): connect the ones that are here and START
@@ -1830,6 +2088,9 @@ export default class extends Controller {
     if (__SPLIT__) this.#loadFeatures()
     else this.#connectFeaturesNow()
 
+    // A dialog the server rendered open with data-reactive-modal (issue #365).
+    upgradeModals(this.element)
+
     // LAST, after every feature above is wired: a replayed trigger must find
     // the controller exactly as a live event after connect would.
     this.#announceConnected()
@@ -1849,6 +2110,7 @@ export default class extends Controller {
       this.#connectFeatureNow(BINDINGS, "bindings", bindingsNeeded, (core) => bindingsFeature.connect(this, core, morphed))
       this.#connectFeatureNow(COMPUTE, "compute", computeNeeded, (core) => computeFeature.connect(this, core, morphed))
       this.#connectFeatureNow(SORTABLE, "sortable", sortableNeeded, (core) => sortableFeature.connect(this, core))
+      this.#connectFeatureNow(PRESENCE, "presence", presenceNeeded, (core) => presenceFeature.connect(this, core))
     }
   }
 
@@ -1886,6 +2148,7 @@ export default class extends Controller {
       if (on & BINDINGS) this.#disconnectFeatureNow("bindings", () => bindingsFeature.disconnect(this, core))
       if (on & COMPUTE) this.#disconnectFeatureNow("compute", () => computeFeature.disconnect(this, core))
       if (on & SORTABLE) this.#disconnectFeatureNow("sortable", () => sortableFeature.disconnect(this, core))
+      if (on & PRESENCE) this.#disconnectFeatureNow("presence", () => presenceFeature.disconnect(this, core))
     }
   }
 
@@ -2074,7 +2337,9 @@ export default class extends Controller {
         ),
       listnavOptions: (event) => this.#listnavOptions(event),
       collectFields: () => this.#collectFields(),
-      // A reactive_editable's value and its last server-rendered text (#351).
+      // A reactive_editable's value and its last server-rendered text (#351),
+      // and whether the engine has contenteditable="plaintext-only" (#355).
+      plain: plaintextSupported,
       text: editableValue,
       served: serverText,
       // The confirm gate, as dispatch() runs it: the resolver inside the chain
@@ -2089,15 +2354,17 @@ export default class extends Controller {
 
   // Re-run the connect-time seeds that read field values, in connect() order
   // — for a feature that changed those values after connect() ran (the draft
-  // restore). Each is the same re-sync its feature runs after a morph; a root
-  // that did not opt into one skips it. on-complete re-ARMS without firing.
+  // restore), or content a stream rendered into the root (issue #356). Each is
+  // the same re-sync its feature runs after a morph; a root that did not opt
+  // into one skips it. on-complete re-ARMS without firing. Form and bindings
+  // also wire a binding whose gate reads true only now (a stream's content).
   #reseed() {
     if (!__SPLIT__) {
-      if (this.#featuresOn & FORM) formFeature.scan(this, this.#featureCore())
+      if (this.#featuresOn & FORM) formFeature.reseed(this)
       if (this.#featuresOn & BINDINGS) bindingsFeature.reseed(this)
       if (this.#featuresOn & COMPUTE) computeFeature.seed(this)
     } else {
-      this.#features.get("form")?.scan(this, this.#featureCore())
+      this.#features.get("form")?.reseed(this)
       this.#features.get("bindings")?.reseed(this)
       this.#features.get("compute")?.seed(this)
     }
@@ -2270,6 +2537,7 @@ export default class extends Controller {
     if (this.#boundRootMorph) {
       this.element.removeEventListener?.("turbo:morph-element", this.#boundRootMorph)
       this.element.removeEventListener?.("focusin", this.#boundRootMorph)
+      this.element.removeEventListener?.(STREAMED, this.#boundRootMorph)
     }
     // Early triggers (issue #273): a disconnected root records again.
     earlyState().connected.delete(this.element)
@@ -2290,6 +2558,13 @@ export default class extends Controller {
   // a per-controller promise makes each dispatch wait for the previous one, so
   // it always uses the freshest token.
   dispatch(event) {
+    // A shortcut (issue #357) that is the other platform's twin, or pressed
+    // in a field the user is typing in, is a complete no-op: the native
+    // default (text undo) proceeds and nothing is announced. Checked FIRST: a
+    // delete/backspace shortcut (issue #366) binds a bare window keydown, so
+    // every key the user presses lands here.
+    const shortcut = event.params?.shortcut
+    if (shortcut != null && !shortcutApplies(shortcut, event, this.application?.schema?.keyMappings)) return
     // A :once trigger already replayed on connect (issue #273) is spent.
     if (earlyOnceSwallows(event, "dispatch", this.application?.schema?.keyMappings, this.element)) return
     // `window` (renamed: never shadow the global) and `outside` are the event-
@@ -2345,7 +2620,11 @@ export default class extends Controller {
     // (which has no form-navigation default to lose) skips it and flips now, and
     // the failure revert snaps it back. A `change`-bound trigger is unaffected —
     // `change` isn't cancelable, so preventDefault was already a no-op there.
-    if (!windowBound && !this.#keepsNativeToggle(optimistic, target)) event.preventDefault()
+    //
+    // A shortcut (issue #357) IS prevented: its key filter has already narrowed
+    // the window binding to one chord the page claims (mod+s must not also open
+    // the browser's save dialog).
+    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target)) event.preventDefault()
 
     // A reactive_lazy(on:) shell's trigger (issue #276) goes through the one
     // materialize entry point, which dedupes it against the observer, the
@@ -2450,6 +2729,12 @@ export default class extends Controller {
   // the component resets whatever they toggled (by design — a signed action
   // owns state that must survive re-renders).
   runOps(event) {
+    // A lone shortcut record (Stimulus typecasts it to an object) whose chord
+    // did not fire bails before any bookkeeping: a delete/backspace shortcut
+    // (issue #366) binds a bare window keydown that hears every key. Several
+    // records are checked one by one below.
+    const lone = event.params?.ops
+    if (lone?.shortcut != null && !shortcutApplies(lone.shortcut, event, this.application?.schema?.keyMappings)) return
     if (earlyOnceSwallows(event, "runOps", this.application?.schema?.keyMappings, this.element)) return
     if (bindingsAlreadyRan(event, this)) return
     const params = event.params ?? {}
@@ -2484,6 +2769,10 @@ export default class extends Controller {
       // A detail miss (issue #346) is a complete no-op — checked before the
       // once record is spent, preventDefault and the confirm gate.
       if (!detailMatches(record, event)) continue
+      // So is a shortcut that is not this platform's twin or fired in an
+      // editable target (issue #357).
+      if (record.shortcut != null && !shortcutApplies(record.shortcut, event, this.application?.schema?.keyMappings))
+        continue
       if (onceBindingSpent(this, event, record)) continue
       this.#runBinding(record.legacy ? { ...params, ops: record.ops } : record, event, trigger)
     }
@@ -2491,7 +2780,7 @@ export default class extends Controller {
 
   // One on_client binding (issue #95): its outside guard, preventDefault rule,
   // confirm gate, then its ops — every flag read from the binding itself.
-  #runBinding({ ops, confirm, confirmWhen, outside, window: windowBound }, event, trigger) {
+  #runBinding({ ops, confirm, confirmWhen, outside, window: windowBound, shortcut }, event, trigger) {
     // Outside guard FIRST — identical semantics to dispatch() (issue #80): an
     // outside: trigger is a COMPLETE no-op for events inside this root, before
     // preventDefault and before any op runs.
@@ -2503,7 +2792,8 @@ export default class extends Controller {
     // would kill native clicks site-wide (issue #80 rationale). Runs BEFORE the
     // (possibly async) confirm gate below — a native default can't wait for a
     // pending dialog (same ordering as dispatch()).
-    if (!windowBound) event.preventDefault()
+    // A shortcut (issue #357) is prevented: it is one chord the page claims.
+    if (shortcut != null || !windowBound) event.preventDefault()
 
     // Resolve the effective confirm message — static string, or the conditional
     // Hash form (issue #179) evaluated over collected fields (a promise of it
@@ -3044,6 +3334,12 @@ export default class extends Controller {
         // already gets the action's HTTP response. Harmless without pgbus.
         const connectionId = this.#connectionId()
         if (connectionId) headers["X-Pgbus-Connection"] = connectionId
+        // A presence root's own connection (issue #358): the row its presence
+        // writes land on, whatever source comes first on the page.
+        const presence =
+          presenceNeeded(this.element) &&
+          document.getElementById(`reactive-presence-src-${this.element.id}`)?.getAttribute("connection-id")
+        if (presence) headers["X-Reactive-Presence"] = presence
 
         // ONLY `fetch` itself is the network boundary — offline, DNS, a reset
         // connection. Everything below this inner try (reading the body,

data/lib/phlex/reactive/component/dsl.rb

@@ -356,6 +356,11 @@ module Phlex
               raise ArgumentError, "#{self}: reactive_dormant takes true or false, got #{dormant.inspect}"
             end
 
+            # Issue #358: a dormant root never connects, so it could never join.
+            # A ClientBindings-only class has no presence declaration to refuse.
+            refuse_dormant_presence! if dormant && respond_to?(:reactive_presence_declaration) &&
+                                        reactive_presence_declaration
+
             Phlex::Reactive::Dormant.reject_visible_lazy!(self) if dormant
 
             Registry.write_scalar(self, :dormant, dormant)