hibiki_rails 0.16.0 → 0.17.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d7bfeee9d4e44c3404ac6582548e0bdb46ae139cfa26eec2c71b7d8b95c40c77
-  data.tar.gz: ab0505b42c8450e0a8014f94c380ed2f3e995448a9cf8cfc8ed16f4eb450d524
+  metadata.gz: 4919aaf1d8c96e1436138dfc5c0050602e0590447ccf9daebb5598072bf01e2d
+  data.tar.gz: 214048d87eec87fa482744750f736eb3d3004381864e69c12b1664a10ffaf9a5
 SHA512:
-  metadata.gz: 6c032ed168913d5c4cc0a56afdf8b6a58cd89ad61581acfda17fc6e2a8030f0ebe4a81f35e0f4ec58691b79df2e6831be4bfa75f4d850db2ff334d9504a30bbb
-  data.tar.gz: 79144e77c309815099be858e605ddad09c6a655ebc2b66f3e20c68fdfe6cf0dceca295bc418304ea6fb0865dfda732a9a4704018029fd8f52a39f21148e15532
+  metadata.gz: f1da64047eb007f11f45f55007519808ad717f9b53968273455586c3977486f1e03e2478f9041c05a7f9d889191d6591a7e116e21d918dfb7719b337e0eeed3b
+  data.tar.gz: 1ed922620989a1997ef4231a7c2e737cbca070ff3c3917966c74b1ed48c28e087e08fd7763152eeb96b713e8675b5126d831b07e5e4dc10e22c31d20cb908fdb

data/CHANGELOG.md

@@ -4,6 +4,112 @@ The gem and the npm package are released in lockstep and share these version
 numbers — `app/assets/javascripts/hibiki.js` is a single copy served both ways,
 so importmap and bundler apps always resolve identical client code.
 
+## 0.17.1 — 2026-10-09
+
+### Fixed
+
+**Renders sent over the broadcast transport could reach the page out of
+order.** Action Cable hands each broadcast to a pool of threads, so two
+renders a channel sent a millisecond apart could be delivered in either
+order. When both drew the same target, the page ended on the older one and
+stayed wrong until something rendered that target again: a Save button left
+enabled, a note that contradicted the server's state. It was always
+possible; since 0.17.0 sends a debounced field's text just ahead of a click
+or a submit, any form with one did it routinely.
+
+- `broadcast_replace` and `broadcast_morph` now number their renders, and
+  the client applies them in the order the channel sent them. Nothing changes
+  in the channel or the view.
+- A render that arrives ahead of an earlier one waits for it, for at most
+  100 ms. One that arrives later than that is still drawn, unless a newer
+  render has drawn the same target since.
+- `broadcast_refresh`, the transmit transport, and streams an app sends with
+  `Turbo::StreamsChannel` itself are not affected and not changed.
+- Both halves are needed, so update the gem and the npm package together. A
+  page on one side only behaves as 0.17.0 did.
+- `broadcast_replace` and `broadcast_morph` also accept `attributes:`, which
+  are kept on the stream beside the gem's own.
+
+## 0.17.0 — 2026-10-08
+
+### Added
+
+**Keys in `on`.** `event:` takes `keydown.<key>`, so a form's Escape or a
+list's arrow keys reach the channel with no JavaScript in the app.
+
+```erb
+<%= tag.div(**on(:cancel, event: "keydown.esc")) do %> ... <% end %>
+<%= link_to "New", new_song_path,
+      **on(:new_form, event: ["click", "keydown.n@window"]) %>
+```
+
+- A key is heard while focus is inside its element. With `@window` it is
+  heard anywhere on the page, for as long as the element is rendered.
+- Keys: `enter`, `tab`, `esc`, `space`, `up`, `down`, `left`, `right`,
+  `home`, `end`, `page_up`, `page_down`, a letter, or a digit. Modifiers go
+  in front: `keydown.ctrl+s`, `keydown.meta+shift+k`. They are `ctrl`, `meta`
+  and `shift`, and they match exactly.
+- A matched key's default is prevented. Keys pressed during IME composition
+  and a held key's repeats are ignored.
+- A window key with neither `ctrl` nor `meta` is ignored while the visitor is
+  typing in a field, except `esc`.
+- A bare `keydown` raises; `input` is the event for typed text.
+
+**`focus`: the cursor in a field a render opens.** A row that turns into a
+form used to leave focus on the page, so the visitor had to click into the
+field before typing or pressing Escape.
+
+```erb
+<%= text_field_tag "title", form.title, **focus(select: true) %>
+```
+
+- The client focuses the marked element once, on the render that brings it.
+  `select: true` also selects its text.
+- Only a render this tab's own action caused counts. Another visitor's save
+  never moves the cursor, and neither does a page refresh.
+- A marked element in the page's first HTML is not focused; use `autofocus`
+  there.
+- Focus is not taken from a field whose typed text has yet to be sent.
+- `focus` returns a `{ data: }` hash like `on` and `props`:
+  `**on(:set_field, event: :input).deep_merge(focus)`.
+
+**Focus comes back when a render removes the focused element.** After Save,
+Cancel or Escape the form is gone, and focus used to fall to `<body>`: a
+keyboard user lost their place, and the island stopped hearing keys. The
+client now gives focus back to a control. Nothing more to write in the view.
+
+- A form opened with `focus` returns to the control that opened it: the
+  row's Edit link, the New button. The client remembers which control's
+  action brought the marked field, and finds it again after a re-render by
+  its id, or by its action and `with:` payload.
+- A replaced element with the same id takes the focus, and the caret, its
+  predecessor had.
+- Failing both, focus goes to the first control inside the nearest ancestor
+  that has an id.
+- Only a control ever takes focus. When none of these is found, as after a
+  row is destroyed, focus is left where the browser put it.
+- It applies to any render, on both transports and after a page refresh, and
+  never moves focus the visitor has since put somewhere else.
+
+### Fixed
+
+**Typed text is no longer lost to a render that lands inside the input
+debounce.** A debounced field holds text the server has not heard for a
+quarter second. Any render reaching the field in that wait was drawn without
+it, and the morph wrote the older value over what the visitor had typed. The
+render need not be theirs: another visitor's save of any row was enough.
+
+- A field with unsent input now wins over a render. The client records the
+  text and the caret as it is typed and puts them back after the render,
+  until the debounced send has fired. After that the server's value wins
+  again, so Reset and a failed save still overwrite the field.
+- Any action that is not debounced first sends the island's pending
+  debounced input, so gestures reach the server in the order they were made:
+  typing into a field and pressing Enter inside the wait no longer saves the
+  form without the last characters.
+- This covers fields wired with a debounce (`event: :input`). Checkboxes,
+  radios, file inputs and multi-selects are not recorded.
+
 ## 0.16.0 — 2026-10-07
 
 ### Added

data/app/assets/javascripts/hibiki.js

@@ -45,7 +45,10 @@
 //                 data-hibiki-params-value='{"record_id":7}'  extra subscribe
 //                 params, merged UNDER channel/cid so they can't override them
 //   controls      data-hibiki-on="<event>-><action> ..."  whitespace-separated;
-//                 e.g. "click->load_more visible->load_more"
+//                 e.g. "click->load_more visible->load_more". A key is
+//                 "keydown.<key>" (heard inside the control) or
+//                 "keydown.<key>@window" (heard anywhere), with ctrl+ meta+
+//                 shift+ in front in that order; only the names in KEYS below
 //                 data-hibiki-with='{"index":3}'       optional JSON payload
 //                 data-hibiki-debounce="250"           ms to let the gesture settle
 //                 data-hibiki-confirm="Are you sure?"  window.confirm gate
@@ -61,6 +64,11 @@
 //                 that have no attribute, assigned on connect and after each
 //                 render; only the names in PROPS below, an optional "key"
 //                 beside them existing to change the text
+//   focus sites   data-hibiki-focus="true|select"      takes focus, and has its
+//                 text selected, when a render this tab caused inserts it
+//   turbo streams data-hibiki-seq="3"                  the render's number, and
+//                 data-hibiki-from="CounterChannel/<cid>" the island it is for;
+//                 see "Render order" below
 //
 // The client writes the protocol's other half at runtime — read-only to
 // app code, addressed to app CSS:
@@ -89,6 +97,40 @@
 // Everything that is not "which event" is a sibling attribute, so the
 // token grammar never has to grow.
 //
+// A debounced field holds text the server has not heard, and two rules keep
+// it. A render landing inside the wait is drawn without the text, so the
+// client records it at input time and puts it back after the render: a
+// field with unsent input wins, until its send fires. And any undebounced
+// action first flushes the island's pending debounces, so gestures reach
+// the server in the order they were made.
+//
+// A focus site takes focus once, on the render that brings it: marked now
+// and not at the scan before, by element or by id. Only a render this tab
+// caused counts, one that arrived while an action was in flight or just
+// after its ack, so a render nobody here asked for never moves the cursor.
+// A mark in the page's first HTML is `autofocus`'s business, and a refresh
+// morph focuses nothing.
+//
+// Focus is also given back. When a render removes the element that had
+// focus, it would fall to <body>: a keyboard user loses their place, and
+// the island stops hearing keys. So the client looks, in order, for the
+// element now carrying the same id (a replaced field); for the control
+// whose gesture opened the focus site that render closed (the Edit button
+// of a form now gone), known again after a re-render by its id or by its
+// action and payload; and for the first control of the focused element's
+// nearest id-bearing ancestor. Only controls: when none of these is there,
+// focus is left where the browser put it. Any render, whoever caused it.
+//
+// Render order. Action Cable hands each broadcast to a worker pool, so two
+// renders the channel sent a millisecond apart can arrive in either order,
+// and the page would end on the older one. The channel numbers its Turbo
+// streams and the island applies them in that order: one that arrives ahead
+// of its turn is held until the missing ones come, or until `orderGrace`
+// runs out on one that never will. A render that turns up after it was
+// given up on is still drawn, unless a later one has drawn the same target
+// since. A stream with no number, or another island's, is left alone. The
+// transmit transport needs none of this: it writes to the socket in order.
+//
 // App JS reaching the graph — the ONE public seam. A gesture that needs
 // script (drag-and-drop, a third-party widget) fires its action through
 // the island's OWN subscription: `perform(action, payload)` on the island
@@ -232,9 +274,15 @@ export class ChannelController extends Controller {
   // busyCeiling ms before a trip is declared stalled rather than silently
   //             cleared. On a bad link "we lost it" beats "nothing
   //             happened".
+  // focusGrace  ms after a trip settles in which a render still counts as
+  //             its answer (see own()). One action can broadcast twice: the
+  //             first render settles the trip with the ack and the second
+  //             trails both. Longer than busyGrace because a missed focus
+  //             costs more than a spinner's flicker.
   static busyDelay = 150
   static busyGrace = 60
   static busyCeiling = 10000
+  static focusGrace = 500
 
   async connect() {
     this.prepareTransport()
@@ -254,6 +302,7 @@ export class ChannelController extends Controller {
     this.seq = 0
     this.renders = 0
     this.busy = new Map()
+    this.settledAt = -Infinity
     this.lastControl = null
     this.queued = []
     this.setState("connecting")
@@ -447,6 +496,7 @@ export class ChannelController extends Controller {
     clearTimeout(record.ceiling)
     clearTimeout(record.grace)
     this.busy.delete(seq)
+    this.settledAt = performance.now()
     record.control?.removeAttribute("data-hibiki-busy")
     if (this.busy.size === 0) this.hideBusy()
   }
@@ -464,6 +514,13 @@ export class ChannelController extends Controller {
     this.element.removeAttribute("aria-busy")
   }
 
+  // Whether a render arriving now answers this tab's own action: one is in
+  // flight, or settled within the grace. Asked when the render arrives, not
+  // when it is applied, since the motion module may hold it for a second.
+  own() {
+    return this.busy.size > 0 || performance.now() - this.settledAt <= this.constructor.focusGrace
+  }
+
   // Say so rather than clearing silently: on a bad link the honest report
   // is "we lost it", and a cleared indicator claims the opposite.
   stall(seq) {
@@ -602,6 +659,88 @@ const PROPS = {
 }
 const appliedProps = new WeakMap()
 
+// Fields whose state is not their `value`, so there is no typed text to keep.
+const typed = (field) =>
+  typeof field.value === "string" &&
+  !field.multiple &&
+  !["checkbox", "radio", "file"].includes(field.type)
+
+// The keys a `keydown.<key>` token may name, by the `event.key` each
+// reports; a single letter or digit names itself. The server keeps the same
+// list (Keys in the gem) and emits nothing outside it.
+const KEYS = {
+  enter: "Enter",
+  tab: "Tab",
+  esc: "Escape",
+  space: " ",
+  up: "ArrowUp",
+  down: "ArrowDown",
+  left: "ArrowLeft",
+  right: "ArrowRight",
+  home: "Home",
+  end: "End",
+  page_up: "PageUp",
+  page_down: "PageDown"
+}
+const KEYED = '[data-hibiki-on*="keydown."]'
+const HOTKEYED = '[data-hibiki-on*="@window"]'
+const ISLAND = '[data-controller~="hibiki"]'
+
+// A key press that is a gesture: not part of an IME composition (Safari
+// reports the Enter that ends one only as keyCode 229), not a held key's
+// repeat, and not Chrome's keyless autofill event.
+const heard = (event) =>
+  typeof event.key === "string" &&
+  !event.isComposing &&
+  event.keyCode !== 229 &&
+  !event.repeat
+
+// Where a plain key is text, or moves within it.
+const NOT_TEXT = new Set([
+  "checkbox", "radio", "file", "button", "submit", "reset", "image", "range", "color"
+])
+const entering = (target) =>
+  !!target.closest?.('textarea, select, [contenteditable]:not([contenteditable="false"])') ||
+  (target.localName === "input" && !NOT_TEXT.has(target.type))
+
+// The action of the control's first key token of this scope ("" or
+// "window") that the event matches. Modifiers match exactly, and Alt
+// matches nothing: on macOS it changes the character the key reports.
+// `typing` is a window key pressed in a text field, where only Escape and
+// ctrl or meta combinations are not the field's own.
+function keyAction(control, event, scope, typing = false) {
+  const pressed = event.key.length === 1 ? event.key.toLowerCase() : event.key
+  for (const token of (control.dataset.hibikiOn ?? "").split(/\s+/)) {
+    if (!token.startsWith("keydown.")) continue
+    const [bound, action] = token.slice(8).split("->")
+    const [combo, at = ""] = bound.split("@")
+    if (at !== scope) continue
+    const modifiers = combo.split("+")
+    const name = modifiers.pop()
+    if ((KEYS[name] ?? (name.length === 1 ? name : null)) !== pressed) continue
+    const ctrl = modifiers.includes("ctrl")
+    const meta = modifiers.includes("meta")
+    if (typing && !ctrl && !meta && name !== "esc") continue
+    if (
+      event.ctrlKey === ctrl &&
+      event.metaKey === meta &&
+      event.shiftKey === modifiers.includes("shift") &&
+      !event.altKey
+    ) {
+      return action
+    }
+  }
+}
+
+// What focus return may land on inside a surviving ancestor.
+const FOCUSABLE =
+  'a[href], button:not(:disabled), input:not(:disabled):not([type="hidden"]), ' +
+  'select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])'
+
+// Key events a window binding answered, so a second island declaring the
+// same key still fires where a key taken by anything else is left alone.
+const hotkeyed = new WeakSet()
+
 function applyProps(element) {
   const text = element.getAttribute("data-hibiki-props")
   let wanted
@@ -627,6 +766,11 @@ export default class HibikiController extends ChannelController {
   // stamps no data-hibiki-params-value.
   static values = { channel: String, params: Object }
 
+  // ms a Turbo render that arrived ahead of its turn waits for the ones
+  // before it (see inOrder). Only a lost broadcast waits it out; a late one
+  // is a pool hop behind, a millisecond or two.
+  static orderGrace = 100
+
   // The island stamps its channel; no inference.
   channelName() {
     return this.channelValue
@@ -663,12 +807,29 @@ export default class HibikiController extends ChannelController {
       this.element.addEventListener(type, handler)
       return [type, handler]
     })
+    // Keys take their own path: a key names its control by a token, not by
+    // being the nearest one.
+    const keydown = (event) => this.key(event)
+    this.element.addEventListener("keydown", keydown)
+    this.listeners.push(["keydown", keydown])
+    // On the window only while the island has a window key; see scan().
+    this.hotkeys = (event) => this.hotkey(event)
 
     // Debounce bookkeeping: a WeakMap keyed by control (so detached
-    // elements don't pin memory) plus a flat set of live timeouts, which is
-    // what disconnect can actually iterate.
+    // elements don't pin memory) plus the live timeouts with what each
+    // will run, which is what disconnect and flush can actually iterate.
+    // `unsent` is the text those timeouts have yet to send, by field.
     this.timers = new WeakMap()
-    this.pending = new Set()
+    this.pending = new Map()
+    this.unsent = new Map()
+    // The focus sites seen at the last scan, each with the control whose
+    // gesture opened it, when one did; a site not among them is new.
+    // Seeded now, so a render landing in the connect window finds the
+    // page's own marks already seen.
+    this.marks = new Map()
+    for (const site of this.element.querySelectorAll("[data-hibiki-focus]")) {
+      if (site.closest(ISLAND) === this.element) this.marks.set(site, undefined)
+    }
 
     // `visible` is not a DOM event, so it needs its own observer beside the
     // delegated listeners. Always on, never a pluggable module: an
@@ -690,24 +851,38 @@ export default class HibikiController extends ChannelController {
     // Re-scan at the points a fragment can be swapped under us, rather
     // than blanket-observing the document: a MutationObserver over the page
     // is a real per-mutation cost paid by every app on it.
+    this.resetOrder()
     this.streamRender = (event) => {
       const render = event.detail.render
-      event.detail.render = async (streamElement) => {
-        await render(streamElement)
-        // The Turbo transport's paint. Counting it here is what lets an ack
-        // settle immediately instead of waiting out its grace window. The
-        // listener is on the document, so an unrelated broadcast counts too
-        // — which at worst settles an already-acked trip a few ms early,
-        // never one that has not been acked at all.
-        this.renders++
-        this.scan()
-      }
+      const stream = event.detail.newStream
+      // Taken now, not when the render's turn comes: see arrival().
+      const arrival = this.arrival()
+      event.detail.render = (streamElement) =>
+        this.inOrder(stream, async () => {
+          await render(streamElement)
+          // The Turbo transport's paint. Counting it here is what lets an ack
+          // settle immediately instead of waiting out its grace window. The
+          // listener is on the document, so an unrelated broadcast counts too
+          // — which at worst settles an already-acked trip a few ms early,
+          // never one that has not been acked at all.
+          this.renders++
+          this.scan(arrival)
+        })
     }
     document.addEventListener("turbo:before-stream-render", this.streamRender)
     // A refresh stream morphs the page after its own render has returned,
     // so the wrapper above scans too early for it; turbo:render follows
     // the morph.
-    this.pageRender = () => this.scan()
+    // It is nobody's own render, so it brings no focus, but it can
+    // take the focused element away like any other.
+    this.pageBefore = () => {
+      this.paging = { trail: this.trail() }
+    }
+    this.pageRender = () => {
+      this.scan(this.paging)
+      this.paging = undefined
+    }
+    document.addEventListener("turbo:before-render", this.pageBefore)
     document.addEventListener("turbo:render", this.pageRender)
 
     await this.openSubscription()
@@ -721,34 +896,206 @@ export default class HibikiController extends ChannelController {
       this.element.removeEventListener(type, handler)
     }
     document.removeEventListener("turbo:before-stream-render", this.streamRender)
+    document.removeEventListener("turbo:before-render", this.pageBefore)
     document.removeEventListener("turbo:render", this.pageRender)
-    for (const id of this.pending) clearTimeout(id)
+    window.removeEventListener("keydown", this.hotkeys)
+    for (const id of this.pending.keys()) clearTimeout(id)
     this.pending.clear()
+    this.unsent.clear()
+    this.marks.clear()
     this.observer.disconnect()
+    this.resetOrder()
     super.disconnect()
   }
 
+  // A reconnect builds a fresh graph, which numbers its renders from 1.
+  linkClosed() {
+    this.resetOrder()
+    super.linkClosed()
+  }
+
+  // ── Render order ──────────────────────────────────────────────────────
+  //
+  // `due` is the number of the next render to apply and `held` the renders
+  // waiting on it, by number. `missed` and `drawn` exist only after a gap
+  // was given up on: the numbers skipped, and the last number drawn into
+  // each target since, which is what tells a late render it is stale.
+
+  // Run `job` (the render and what follows it) when the stream's turn
+  // comes, or never when it is stale. Jobs are CALLED in order and not
+  // awaited: a call reaches the swap, or the motion module's queue, before
+  // it returns, and that queue keeps the order from there.
+  inOrder(stream, job) {
+    const seq = Number(stream?.getAttribute?.("data-hibiki-seq"))
+    if (!seq || stream.getAttribute("data-hibiki-from") !== `${this.channelValue}/${this.cidValue}`) {
+      return job()
+    }
+    const target = stream.getAttribute("target")
+    const run = () => {
+      this.drew(target, seq)
+      return job()
+    }
+    if (seq < this.due) {
+      // Late. A number never given up on is a repeat, or older than
+      // anything remembered.
+      const stale = !this.missed.delete(seq) || this.drawn.get(target) > seq
+      return stale ? Promise.resolve() : run()
+    }
+    if (seq > this.due) {
+      return new Promise((resolve) => {
+        this.held.set(seq, () => resolve(run()))
+        this.orderTimer ??= setTimeout(() => this.giveUp(), this.constructor.orderGrace)
+      })
+    }
+    const done = run()
+    this.due++
+    this.release()
+    return done
+  }
+
+  // Apply the held renders that now follow on. Any still held wait on a
+  // new gap, with a new grace.
+  release() {
+    for (let run; (run = this.held.get(this.due)); this.due++) {
+      this.held.delete(this.due)
+      run()
+    }
+    clearTimeout(this.orderTimer)
+    this.orderTimer = this.held.size
+      ? setTimeout(() => this.giveUp(), this.constructor.orderGrace)
+      : undefined
+  }
+
+  // The grace ran out: move past the missing numbers to the first held.
+  giveUp() {
+    const first = Math.min(...this.held.keys())
+    for (let seq = this.due; seq < first; seq++) this.missed.add(seq)
+    this.missedAt = performance.now()
+    this.due = first
+    this.release()
+  }
+
+  // Remember what was drawn while a missed render may still turn up, and
+  // no longer: one later than the ceiling is lost by the same measure a
+  // trip is.
+  drew(target, seq) {
+    if (performance.now() - this.missedAt > this.constructor.busyCeiling) this.missed.clear()
+    if (!this.missed.size) return this.drawn.clear()
+    if (!(this.drawn.get(target) > seq)) this.drawn.set(target, seq)
+  }
+
+  // Start counting again from 1. Renders still held are the old graph's
+  // last word, so they are applied first, in order.
+  resetOrder() {
+    clearTimeout(this.orderTimer)
+    this.orderTimer = undefined
+    const held = [...(this.held ?? [])].sort(([a], [b]) => a - b)
+    this.due = 1
+    this.held = new Map()
+    this.missed = new Set()
+    this.drawn = new Map()
+    for (const [, run] of held) run()
+  }
+
   // The other swap point: hibiki's own transmit transport. A held swap
   // hands back a promise; the replacement sentinel exists only after it.
   received(data) {
+    const arrival = this.arrival()
     const swapped = super.received(data)
     if (!data.html) return
-    if (swapped?.then) swapped.then(() => this.scan())
-    else this.scan()
-  }
-
-  // What a render leaves for the client to finish, in one walk of the
-  // island: assign every prop site's properties, and observe every
-  // `visible->` sentinel this island owns. observe() is a no-op for an
-  // element already being observed, so re-scanning is cheap and cannot
-  // double-fire a sentinel that merely stayed put. Props need no ownership
-  // check: assigning one twice, from a nested island and its parent, lands
-  // the same value.
-  scan() {
+    if (swapped?.then) swapped.then(() => this.scan(arrival))
+    else this.scan(arrival)
+  }
+
+  // What is only knowable as a render arrives: whether it answers this
+  // tab's action, the control that action came from (the motion module
+  // forgets it once a held render lands), and where focus was.
+  arrival() {
+    return { own: this.own(), control: this.lastControl, trail: this.trail() }
+  }
+
+  // The focused element, when it is this island's, with the ids from it
+  // upward, nearest first, and its caret.
+  trail() {
+    const element = document.activeElement
+    if (!element || element === this.element || element.closest?.(ISLAND) !== this.element) return
+    const ids = []
+    for (let node = element; node !== this.element; node = node.parentElement) {
+      if (node.id) ids.push(node.id)
+    }
+    if (this.element.id) ids.push(this.element.id)
+    return { element, ids, self: Boolean(element.id), start: element.selectionStart, end: element.selectionEnd }
+  }
+
+  // Give focus back after a render removed the element that had it; the
+  // header has the rule. `opener` is the control behind a focus site the
+  // same render closed. Left alone when focus has gone somewhere since.
+  refocus({ element, ids, self, start, end }, opener) {
+    if (element.isConnected) return
+    const active = document.activeElement
+    if ((active && active !== document.body && active.isConnected) || !this.element.isConnected) return
+    const found = (id) => {
+      const survivor = document.getElementById(id)
+      return survivor && this.element.contains(survivor) ? survivor : null
+    }
+    const index = ids.findIndex(found)
+    if (self && index === 0) {
+      const twin = found(ids[0])
+      twin.focus()
+      if (start != null && document.activeElement === twin) twin.setSelectionRange?.(start, end)
+      return
+    }
+    const candidates = [opener && this.twin(opener)]
+    if (index === (self ? 1 : 0)) candidates.push(...found(ids[index]).querySelectorAll(FOCUSABLE))
+    for (const control of candidates) {
+      control?.focus()
+      if (control && document.activeElement === control) return
+    }
+  }
+
+  // The control a gesture came from, or the one a render has put in its
+  // place: the same id, else the same action and payload.
+  twin({ element, id, on, payload }) {
+    if (element.isConnected) return element
+    const twin = id
+      ? document.getElementById(id)
+      : [...this.element.querySelectorAll("[data-hibiki-on]")].find(
+          (control) => control.dataset.hibikiOn === on && control.dataset.hibikiWith === payload
+        )
+    return twin?.closest(ISLAND) === this.element ? twin : null
+  }
+
+  // What a render leaves for the client to finish: put back unsent text,
+  // then in one walk of the island assign every prop site's properties,
+  // observe every `visible->` sentinel this island owns, listen on the
+  // window while a window key is declared, and settle focus: on the first
+  // focus site the render brought when it was this tab's `own`, else back
+  // to a control when the render removed the focused element. Focus before
+  // the unsent text, whose caret goes only to the focused field. observe()
+  // is a no-op for an element already being observed, so re-scanning is
+  // cheap and cannot double-fire a sentinel that merely stayed put; adding
+  // a listener twice is a no-op too. Props need no ownership check: assigning one twice,
+  // from a nested island and its parent, lands the same value. Nor does
+  // the window listener, which finds nothing of its own to fire.
+  scan({ own = false, control, trail } = {}) {
     const found = this.element.querySelectorAll(
-      '[data-hibiki-on*="visible->"], [data-hibiki-props]'
+      `[data-hibiki-on*="visible->"], [data-hibiki-props], [data-hibiki-focus], ${HOTKEYED}`
     )
+    let hotkeys = this.element.matches(HOTKEYED)
+    // A site is the one seen before when it is that element or, after a
+    // replace, carries its id; it keeps the opener either way.
+    const seen = new Map()
+    for (const [was, opener] of this.marks) if (was.id) seen.set(was.id, opener)
+    const marks = new Map()
+    const ids = new Set()
+    let site
     for (const element of found) {
+      if (element.hasAttribute("data-hibiki-focus") && element.closest(ISLAND) === this.element) {
+        marks.set(element, this.marks.get(element) ?? seen.get(element.id))
+        if (element.id) ids.add(element.id)
+        if (!this.marks.has(element) && !seen.has(element.id)) site ??= element
+      }
+      hotkeys ||= element.dataset.hibikiOn?.includes("@window")
       if (element.hasAttribute("data-hibiki-props")) applyProps(element)
       if (
         element.dataset.hibikiOn?.includes("visible->") &&
@@ -757,6 +1104,75 @@ export default class HibikiController extends ChannelController {
         this.observer.observe(element)
       }
     }
+    if (hotkeys) window.addEventListener("keydown", this.hotkeys)
+    else window.removeEventListener("keydown", this.hotkeys)
+    // The opener of a site this render closed, for the focus it leaves.
+    let opener
+    for (const [was, its] of this.marks) {
+      if (its && !marks.has(was) && !ids.has(was.id)) opener = its
+    }
+    this.marks = marks
+    // Not from a field with unsent input: the visitor is typing there.
+    if (own && site && !this.unsent.has(trail?.element)) {
+      if (control) {
+        const { id, dataset } = control
+        marks.set(site, { element: control, id, on: dataset.hibikiOn, payload: dataset.hibikiWith })
+      }
+      const take = () => {
+        site.focus()
+        if (site.dataset.hibikiFocus === "select") site.select?.()
+      }
+      take()
+      // Turbo hands focus back to the id that had it before a stream, one
+      // frame after appending it, which is just after this. Take it again.
+      const id = trail?.element.id
+      if (id) {
+        setTimeout(() => {
+          if (site.isConnected && document.activeElement?.id === id) take()
+        }, 0)
+      }
+    } else if (trail) {
+      this.refocus(trail, opener)
+    }
+    if (this.unsent.size) this.restoreUnsent()
+  }
+
+  // A key pressed inside the island: the nearest control up from the
+  // target whose key token matches. Not forward()'s nearest control, since
+  // a field wired for `input` sits inside the form that takes Escape. A
+  // key something else took (a nested island, the page's script) is left.
+  key(event) {
+    if (event.defaultPrevented || !heard(event)) return
+    let control = event.target.closest?.(KEYED)
+    while (control && this.element.contains(control)) {
+      const action = control.closest(ISLAND) === this.element && keyAction(control, event, "")
+      if (action) return this.press(control, event, action)
+      control = control.parentElement?.closest(KEYED)
+    }
+  }
+
+  // A key pressed anywhere: the island's first enabled control declaring
+  // it `@window`, the root included. One an inside control answered has
+  // its default prevented, and so is not heard here.
+  hotkey(event) {
+    if ((event.defaultPrevented && !hotkeyed.has(event)) || !heard(event)) return
+    const typing = entering(event.target)
+    for (const control of [this.element, ...this.element.querySelectorAll(HOTKEYED)]) {
+      if (control.closest(ISLAND) !== this.element || control.matches(":disabled")) continue
+      const action = keyAction(control, event, "window", typing)
+      if (!action) continue
+      hotkeyed.add(event)
+      return this.press(control, event, action)
+    }
+  }
+
+  // A matched key is the control's gesture, so its default goes. A fallback
+  // control on an island that is not ready stands aside: a key has no
+  // native destination, but its default may be the form's own submit.
+  press(control, event, action) {
+    if ("hibikiFallback" in control.dataset && this.state !== "ready") return
+    event.preventDefault()
+    this.run(control, event, action)
   }
 
   // DOM → server: forward a control's event as a channel action.
@@ -776,8 +1192,11 @@ export default class HibikiController extends ChannelController {
       .split(/\s+/)
       .find((t) => t.startsWith(`${event.type}->`))
     if (!token) return
-    const action = token.slice(event.type.length + 2)
+    this.run(control, event, token.slice(event.type.length + 2))
+  }
 
+  // From a control's matched token to the wire.
+  run(control, event, action) {
     // A fallback control's native behavior IS the degraded path: unless
     // the island is `ready`, stand aside — no perform, no queueing — and
     // the browser follows the href or submits the form to its own
@@ -807,8 +1226,48 @@ export default class HibikiController extends ChannelController {
     // keystroke that started the timer.
     const wait = Number(control.dataset.hibikiDebounce)
     const fire = () => this.send(control, event, action)
-    if (wait > 0) this.debounce(control, action, wait, fire)
-    else fire()
+    if (wait > 0) {
+      const field = event.target
+      if (event.type !== "keydown" && typed(field)) {
+        this.unsent.set(field, {
+          value: field.value,
+          start: field.selectionStart,
+          end: field.selectionEnd
+        })
+      }
+      this.debounce(control, action, wait, () => {
+        fire()
+        // Sent: from here the server's value for the field wins again.
+        if (!this.timers.get(control)?.size) this.unsent.delete(field)
+      })
+    } else {
+      this.flush()
+      fire()
+    }
+  }
+
+  // A render drew these fields without the text typed since their last
+  // send. A morph kept the element; a replace swapped in another with the
+  // same id (the pending send still reads the detached one, whose value is
+  // intact). The selection is the one the last keystroke left, restored
+  // because assigning a value moves the caret to the end.
+  restoreUnsent() {
+    for (const [field, { value, start, end }] of this.unsent) {
+      const live = field.isConnected ? field : field.id && document.getElementById(field.id)
+      if (!live || !typed(live) || live.value === value) continue
+      live.value = value
+      if (start != null && live === document.activeElement) live.setSelectionRange(start, end)
+    }
+  }
+
+  // Run every pending debounce now, oldest first.
+  flush() {
+    const runs = [...this.pending]
+    this.pending.clear()
+    for (const [id, run] of runs) {
+      clearTimeout(id)
+      run()
+    }
   }
 
   send(control, event, action) {
@@ -865,13 +1324,14 @@ export default class HibikiController extends ChannelController {
       clearTimeout(previous)
       this.pending.delete(previous)
     }
-    const id = setTimeout(() => {
+    const run = () => {
       byAction.delete(action)
       this.pending.delete(id)
       fire()
-    }, wait)
+    }
+    const id = setTimeout(run, wait)
     byAction.set(action, id)
-    this.pending.add(id)
+    this.pending.set(id, run)
   }
 }
 

data/lib/hibiki/rails/broadcasts.rb

@@ -17,16 +17,16 @@ module Hibiki
 
       # Replace the element with DOM id `target` (accepts partial:/locals:,
       # html:, or anything Turbo's renderer takes).
-      def broadcast_replace(target:, **rendering)
-        Turbo::StreamsChannel.broadcast_replace_to(*stream_name, target:, **rendering)
+      def broadcast_replace(target:, attributes: {}, **rendering)
+        Turbo::StreamsChannel.broadcast_replace_to(
+          *stream_name, target:, attributes: attributes.merge(render_stamp), **rendering
+        )
       end
 
       # Replace via Turbo 8 morphing (<turbo-stream action="replace"
       # method="morph">): keeps focus/scroll where a plain replace resets.
-      def broadcast_morph(target:, **rendering)
-        Turbo::StreamsChannel.broadcast_replace_to(
-          *stream_name, target:, attributes: { method: :morph }, **rendering
-        )
+      def broadcast_morph(target:, attributes: {}, **rendering)
+        broadcast_replace(target:, attributes: { method: :morph }.merge(attributes), **rendering)
       end
 
       # Tell the page to refresh itself (Turbo 8 morph-everything style).
@@ -47,6 +47,17 @@ module Hibiki
           broadcast_refresh
         end
       end
+
+      # The number each render carries, and the island it is for. Action
+      # Cable hands every broadcast to a worker pool, so two sent a
+      # millisecond apart can reach the page in either order; the client
+      # applies them by number. Counted per subscription from 1, on the
+      # graph thread alone. A refresh carries none: it fetches the page, so
+      # its order does not matter. Part of the private data-hibiki contract.
+      def render_stamp
+        @__hibiki_renders = @__hibiki_renders.to_i + 1
+        { "data-hibiki-seq": @__hibiki_renders, "data-hibiki-from": "#{self.class.name}/#{params[:cid]}" }
+      end
     end
   end
 end

data/lib/hibiki/rails/helpers.rb

@@ -5,6 +5,7 @@ require "json"
 require "securerandom"
 
 require_relative "dom_props"
+require_relative "keys"
 
 module Hibiki
   module Rails
@@ -46,9 +47,8 @@ module Hibiki
 
       # Event and action names share the hibiki_on attribute, which is a
       # whitespace-separated token list — a name carrying a space or an
-      # arrow would silently change what the client dispatches. The dot is
-      # allowed so a future event qualifier (keydown.enter) needs no second
-      # grammar change.
+      # arrow would silently change what the client dispatches. Key events
+      # (keydown.enter) have their own grammar; see Keys.
       EVENT_NAME = /\A[a-z][a-z0-9_.-]*\z/i
 
       # Per-keystroke round trips are the failure mode #on exists to avoid,
@@ -103,6 +103,13 @@ module Hibiki
         name
       end
 
+      # The left side of a token. Keys validates a key event, and anything
+      # else that asks for a scope.
+      def self.event(name)
+        name = name.to_s
+        name.match?(Keys::EVENT) || name.include?("@") ? Keys.token(name) : event_name(name)
+      end
+
       # The island root: one channel subscription per island, identified by
       # a per-page-load cid (each tab is its own graph). `channel` is the
       # channel class or its name as a string.
@@ -125,8 +132,7 @@ module Hibiki
       # override `channel` or `cid` through this hash.
       def hibiki_island(channel, cid:, params: nil)
         channel_name = channel.is_a?(Class) ? channel.name : channel.to_s
-        data = { controller: "hibiki", hibiki_channel_value: channel_name,
-                 hibiki_cid_value: cid }
+        data = { controller: "hibiki", hibiki_channel_value: channel_name, hibiki_cid_value: cid }
         data[:hibiki_params_value] = JSON.generate(params) unless params.nil?
         { data: }
       end
@@ -169,6 +175,13 @@ module Hibiki
       #
       #   on(:load_more, event: %i[click visible], with: { shown: rows.size })
       #
+      # A key is `keydown.<key>`, heard while focus is inside the element,
+      # or `keydown.<key>@window`, heard anywhere on the page while the
+      # element is rendered. Modifiers go in front; Keys lists both:
+      #
+      #   on(:cancel, event: "keydown.esc")
+      #   on(:new_row, event: ["click", "keydown.ctrl+n@window"])
+      #
       # `with:` is a hash sent as the action's payload. The client adds
       # event-derived data on top: a changed control contributes
       # `{ name => value }` — a checkbox its checked state, a multi-select
@@ -206,7 +219,7 @@ module Hibiki
       def on(action, event: :click, with: nil, debounce: nil, confirm: nil, reset: nil,
              fallback: nil)
         action = Helpers.event_name(action)
-        events = Array(event).map { Helpers.event_name(it) }
+        events = Array(event).map { Helpers.event(it) }
         debounce = DEFAULT_INPUT_DEBOUNCE if debounce.nil? && events.include?("input")
         tokens = events.map { "#{it}->#{action}" }.join(" ")
         { data: { hibiki_on: tokens }
@@ -260,6 +273,18 @@ module Hibiki
         { data: { hibiki_props: JSON.generate(wanted) } }
       end
 
+      # Put the cursor in this element when a render opens it:
+      #
+      #   tag.input name: "title", value: form.title, **focus(select: true)
+      #
+      # The client focuses it once, on the render that brings it, and only
+      # when that render answers this tab's own action; another visitor's
+      # save never moves the cursor. `select: true` also selects its text.
+      # An element in the page's first HTML is not focused: that is the
+      # `autofocus` attribute's job. Returns a `{ data: }` hash, merged like
+      # #props: `**on(:set_field, event: :input).deep_merge(focus)`.
+      def focus(select: false) = { data: { hibiki_focus: select ? "select" : "true" } }
+
       private
 
       # #island's preconditions: a block, an ActionView receiver, a channel

data/lib/hibiki/rails/keys.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Hibiki
+  module Rails
+    # The key events Helpers#on may name, and their wire form:
+    # `keydown.[<modifier>+]*<key>[@window]`. The client keeps the same key
+    # list (KEYS in hibiki.js) and matches nothing outside it. Add a key in
+    # both places.
+    module Keys
+      # Named keys, Stimulus's spellings. Single letters and digits are
+      # keys too.
+      NAMES = %w[enter tab esc space up down left right home end page_up page_down].freeze
+      CHARACTER = /\A[a-z0-9]\z/
+
+      # In wire order. No alt: on macOS Option changes the character the
+      # key reports, so `alt+s` would never match there.
+      MODIFIERS = %w[ctrl meta shift].freeze
+
+      SCOPES = %w[window].freeze
+
+      # What Helpers#on hands over: `keydown` alone or followed by a
+      # qualifier, not a longer name that starts with it.
+      EVENT = /\Akeydown(?![a-z0-9_-])/i
+
+      # One `keydown...` event as its canonical token: lowercase, modifiers
+      # in MODIFIERS order.
+      def self.token(event)
+        event = event.to_s.downcase
+        unless EVENT.match?(event)
+          raise ArgumentError, "event #{event.inspect}: only a keydown.<key> event takes a scope"
+        end
+
+        combo, scope = event.split("@", 2)
+        *modifiers, key = combo.delete_prefix("keydown").delete_prefix(".").split("+")
+        key!(event, key)
+        modifiers!(event, key, modifiers)
+        scope!(event, scope)
+        ["keydown.#{[*(MODIFIERS & modifiers), key].join('+')}", scope].compact.join("@")
+      end
+
+      def self.key!(event, key)
+        if key.nil?
+          raise ArgumentError,
+                "#{event.inspect} names no key; write keydown.<key>, or use :input for typed text"
+        end
+        return if NAMES.include?(key) || CHARACTER.match?(key)
+
+        raise ArgumentError,
+              "key #{key.inspect} in #{event.inspect} must be a letter, a digit, or one of #{NAMES.join(', ')}"
+      end
+
+      def self.modifiers!(event, key, modifiers)
+        unknown = modifiers - MODIFIERS
+        unless unknown.empty?
+          raise ArgumentError,
+                "modifier #{unknown.first.inspect} in #{event.inspect} must be one of #{MODIFIERS.join(', ')}"
+        end
+        return unless modifiers.include?("shift") && key.match?(/\A\d\z/)
+
+        # Shift turns a digit into punctuation, so the key would never match.
+        raise ArgumentError, "#{event.inspect}: shift cannot be combined with a digit"
+      end
+
+      def self.scope!(event, scope)
+        return if scope.nil? || SCOPES.include?(scope)
+
+        raise ArgumentError, "scope #{scope.inspect} in #{event.inspect} must be #{SCOPES.join(', ')}"
+      end
+
+      private_class_method :key!, :modifiers!, :scope!
+    end
+  end
+end

data/lib/hibiki/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Hibiki
   module Rails
-    VERSION = "0.16.0"
+    VERSION = "0.17.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hibiki_rails
 version: !ruby/object:Gem::Version
-  version: 0.16.0
+  version: 0.17.1
 platform: ruby
 authors:
 - planetaska
@@ -187,6 +187,7 @@ files:
 - lib/hibiki/rails/engine.rb
 - lib/hibiki/rails/graph_actor.rb
 - lib/hibiki/rails/helpers.rb
+- lib/hibiki/rails/keys.rb
 - lib/hibiki/rails/nested_actions.rb
 - lib/hibiki/rails/reactive_form.rb
 - lib/hibiki/rails/registry.rb