phlex-reactive 0.11.7 → 0.12.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce274b76a614b8510a9fc365e717d0b5391b815743a9cd0e9f3ffa716428c0ec
-  data.tar.gz: 9be84dd96ad24ef556935b8b68a60ecdbf48fabe902e1541584d6af6f22e17cf
+  metadata.gz: f7be3334f1e2939d4307bb9ac8e490cf81d0d5796abf830a98ab409a5b36c7a7
+  data.tar.gz: ed1bb9d32d29f10a878cfb0a9762991ee057127c66206117e5207ef4a36f5890
 SHA512:
-  metadata.gz: 5e87ae21d988550c315b9ac27a721d5e65b7fdf354ddbaa487cd0e2db7e062ad854198f0a6893ab8e9d0531b6ff698829f7421bd1d8a4fbd3c533992a4485a51
-  data.tar.gz: 107d841025bc3d6d2fecb4b30027e417607773edd12c45503a5615ecee40d9cd5994d42c5ddd40a3ec53c354fa49ef482953844b2ee2ee01311e27c0bbf987c2
+  metadata.gz: 15504e9fbbb4b77cfbe445cc4e20577975358e4ec9f5dfe338f1e28bdf1b280606d877235cd2c2780f3345afd0e553936d325bd4c8bf8a993052de75c3c0ac79
+  data.tar.gz: 7d224d44d5165252e626ab8515c881f0cc2e0f992ff459c710cd31758272d4c1d486d2ed217f1343ecc4e7c9bd201bdb737fdd53d674e48b1e3ada366141da1d

data/CHANGELOG.md

@@ -8,6 +8,61 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+- **Project board — the kanban flagship demo (#216).** A live three-lane board
+  on the docs site (`/docs/example-project-board`, `/demos/project-board`)
+  composing the toolkit end to end: each card is its own nested reactive root
+  (record + signed style state) whose move is ONE reply — the row's remove
+  (its exit effect animates before the element leaves), a fresh-token append
+  into the new lane (wearing its enter effect), and a `reactive:js` text-op
+  stream repainting all three count badges — with the same delta broadcast to
+  peers, actor echo excluded. Inline rename morphs in place, archive is
+  confirm-gated + optimistic, per-lane composers flash on a blank title, and
+  the effect-style picker (including `random`) rides signed state to drive
+  per-call `effect:` overrides. Peer count badges stay live everywhere via
+  `broadcast_to(js:)` — closing the stale-badge gap the team-inbox flagship
+  documents — and empty lanes are pure CSS `:empty`, so the 0↔1 boundary
+  needs no bookkeeping on either delivery path. Docs-app only; no gem code
+  changes.
+
+- **Reactive effects — animate enter/exit/update on every stream render (#215).**
+  Opt-in at three levels, most specific wins: `Phlex::Reactive.effects = true`
+  (or a `{ enter:/exit:/update: }` hash) is the global switch AND the app-wide
+  default set; `reactive_effects enter: :slide, update: false` refines per
+  component (`false` opts out entirely; declaring on a component also works
+  standalone with no global switch); `effect:` on every stream builder, reply
+  verb, and `broadcast_to` overrides one stream (`effect: false` suppresses a
+  declared effect for that call). Five built-ins ship as an engine stylesheet —
+  `stylesheet_link_tag "phlex/reactive/effects"` — fade/slide/scale/highlight/
+  shake, all inside `prefers-reduced-motion: no-preference` and tunable via
+  `--reactive-fx-*` custom properties; `:random` picks a built-in per
+  application; custom effects take the `{ during:, from:, to: }` class-legs
+  vocabulary (issue #186), Tailwind-friendly and stylesheet-free. On the wire
+  the resolved hooks ride the component root as `data-reactive-effect-<hook>`
+  attributes (omitted entirely when off — byte-identical to previous releases)
+  and per-call overrides ride the `<turbo-stream>` element itself; ONE
+  document-level `turbo:before-stream-render` interceptor animates replies AND
+  broadcasts identically on Action Cable and pgbus. `remove` is special: the
+  exit animation runs BEFORE the element leaves the DOM, awaited via
+  `animationend`/`transitionend` with a computed-duration fallback hard-capped
+  at 1s — and a zero computed duration (no effects CSS loaded) skips the wait
+  entirely, so a missing stylesheet can never freeze a removal. Unknown names
+  raise at class load server-side and warn-and-skip client-side (two-sided
+  default-deny). Zero additional allocations per render with effects on (the
+  resolved fragment is a per-class memo keyed on the config + registry
+  generations); the render/token hot paths hold flat with effects off.
+
+- **Confirm on the draft-row remove — `reactive_nested_remove(confirm:)` (#218).**
+  `reactive_nested_remove` now accepts the SAME `confirm:` the other triggers
+  (`on`/`on_client`) do — a static message String, or the conditional Hash form
+  (`{ when: …, message: }` / `{ predicate: …, message: }`, #179) — routed through
+  the shared `apply_confirm!` and gated client-side behind the same overridable
+  `confirmResolver` (the styled-modal seam, #52/#55/#178). On accept it does the
+  existing remove (a draft row leaves the DOM; a persisted row is `_destroy`-marked
+  + hidden) and the existing JSON/attributes re-sync; on cancel, nothing. Per-row
+  messages come for free — the confirm is a per-render string. Works in BOTH wire
+  modes (`:attributes` and `as: :json`). No confirm: → the immediate-remove fast
+  path, unchanged.
+
 - **Fill-then-add for draft nested rows — `reactive_nested_add(:assoc, from:, clear:)` (#208).**
   The draft-rows primitive's add is *inline-edit* — it clones the template and
   focuses the new row's first field, so you type INTO the row. A common
@@ -165,6 +220,25 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- **`reactive_nested_remove(confirm:)` now interpolates `%{field}` on client-added
+  rows (#222).** A row added in the browser via `reactive_nested_add` is a
+  `cloneNode` of the `<template>`, and the clone path (`#renumberNestedRow` /
+  `#seedNestedRow`) never rewrote the confirm attribute — so a per-row confirm
+  froze to the template's value-less string on every added row (the exact rows
+  the primitive exists for). The client now resolves `%{field}` placeholders in
+  the confirm message from **that row's live field values** at click time (keyed
+  by the same trailing-bracket inference `as: :json` uses), so
+  `confirm: "Delete '%{name}'?"` on the template shows `Delete 'Widget'?` on the
+  added row — reflecting a later edit too (resolved on remove, not on clone). An
+  unresolved `%{key}` is left as its literal text (debuggable, never a silent
+  blank); the placeholder works in the conditional Hash's `message:` as well.
+  Server-rendered rows already interpolate server-side, so their finished strings
+  are unaffected. **Also (superset of the issue's proposal 3):** `confirmResolver`
+  now receives an optional second argument — a context object, always `{ el }`
+  (the trigger), plus `{ row, fields }` on a `reactive_nested_remove` — so a
+  themed-dialog override can build row-specific messages programmatically. The
+  arg is additive: a one-parameter resolver (and `window.confirm`) is unchanged.
+
 - **A draft (unsaved-parent) token can now round-trip real server actions (#208).**
   `Component::Identity` already signed a gid-less `{c, state}` token for an
   unpersisted (or nil) record, but `from_identity` still `fetch`ed the absent

data/README.md

@@ -332,11 +332,13 @@ The [inline edit example](https://phlex-reactive.zoolutions.llc/docs/example-inl
 | [Client-only ops](https://phlex-reactive.zoolutions.llc/docs/example-client-ops) | `on_client` tabs / outside-close menu / accessible drawer — zero fetches, zero custom JS |
 | [Failure surface](https://phlex-reactive.zoolutions.llc/docs/example-failure) | `error_flash` + `data-reactive-error` + `dismiss_after:` — what you get for free when an action fails |
 | [Team inbox (flagship)](https://phlex-reactive.zoolutions.llc/docs/example-team-inbox) | The whole toolkit in one UI: collection rows, optimistic archive that **reverts on failure**, cross-tab broadcast, an `on_client` kebab, error flashes |
+| [Project board (flagship)](https://phlex-reactive.zoolutions.llc/docs/example-project-board) | The kanban: cards move across lanes with **enter/exit effects** (per-visitor style picker incl. `random`), live count badges in every tab via `broadcast_to(js:)`, nested reactive rows with inline rename, confirm-gated archive |
 
 Every page renders its **real** reactive component inline (source read straight
 off the file), so the demo and the code can never drift. The
-[Team inbox](https://phlex-reactive.zoolutions.llc/docs/example-team-inbox) is the
-flagship — every feature composed into one believable UI.
+[Team inbox](https://phlex-reactive.zoolutions.llc/docs/example-team-inbox) and the
+[Project board](https://phlex-reactive.zoolutions.llc/docs/example-project-board) are the
+flagships — every feature composed into believable UIs.
 
 ---
 
@@ -397,7 +399,7 @@ Use in controllers: `render turbo_stream: Counter.replace(counter)`.
 | `reactive_dirty` / `reactive_dirty warn_unsaved: true` / `reactive_dirty only: %i[...]` | **Dirty tracking**, declared once at the class level, against the DOM's own `defaultValue`/`defaultChecked`/`defaultSelected` — no client state. Marks changed fields + the root `data-reactive-dirty`; `warn_unsaved:` arms a `beforeunload`/`turbo:before-visit` guard; `only:` scopes tracking to named fields. Style with `[data-reactive-dirty]`. See [Dirty-field tracking](#dirty-field-tracking-reactive_dirty). |
 | `nested_update!(:assoc, attrs)` | Map a nested param onto `<assoc>_attributes` with id preservation; update the record. |
 | `reactive_nested_list(:assoc, as: :attributes \| :json)` / `reactive_nested_template(:assoc)` / `reactive_nested_row` | **Draft nested-attribute rows** (the "new parent + child rows" form): the container rows land in, the `<template>` holding ONE row's markup, and the row wrapper marker — all **client-only** form state, keyed by association (several collections per root). `as: :json` (default `:attributes`) serializes the rows into ONE hidden JSON field instead of posting `accepts_nested_attributes_for` names — for an app whose controller `JSON.parse`s a serialized param. See [Draft rows for a new parent](#draft-rows-for-a-new-parent-reactive_nested_). |
-| `reactive_nested_add(:assoc, from:, clear:)` / `reactive_nested_remove` | The row triggers, client-only (zero round trips): add clones the template and renumbers its placeholder index; remove deletes a draft row from the DOM, or `_destroy`-marks + hides a persisted row (a hidden `[_destroy]` input present). **Fill-then-add**: `from: { row_field => "#source-selector" }` seeds the new row from add controls that live OUTSIDE it (a preset select, a typeahead), and `clear: true` resets them — composes with `as: :attributes` AND `as: :json`. See [Draft rows for a new parent](#draft-rows-for-a-new-parent-reactive_nested_). |
+| `reactive_nested_add(:assoc, from:, clear:)` / `reactive_nested_remove(confirm:)` | The row triggers, client-only (zero round trips): add clones the template and renumbers its placeholder index; remove deletes a draft row from the DOM, or `_destroy`-marks + hides a persisted row (a hidden `[_destroy]` input present). **Fill-then-add**: `from: { row_field => "#source-selector" }` seeds the new row from add controls that live OUTSIDE it (a preset select, a typeahead), and `clear: true` resets them — composes with `as: :attributes` AND `as: :json`. **Confirm on remove**: `reactive_nested_remove(confirm: "Really delete this row?")` gates the remove behind the same overridable `confirmResolver` as `on`/`on_client` (a per-row string, or the conditional `{ when:, message: }` Hash). See [Draft rows for a new parent](#draft-rows-for-a-new-parent-reactive_nested_). |
 | `nested_field_name(:assoc, :field, index: nil)` | The Rails `accepts_nested_attributes_for` wire name for one row field — `order[line_items_attributes][NEW_ROW][quantity]` (the template placeholder) by default, a real index when given. Scope-aware under `reactive_scope`. |
 | `reactive_collection :name, item:, container:, count:, empty:, size:` | Declare an add/remove-row list once; actions call `reply.append`/`prepend`/`remove`. See [Reactive collections](#reactive-collections-addremove-rows--count--empty-state). |
 | `reply.replace` / `.morph` / `.update` / `.remove` / `.redirect(url)` / `.with(*)` / `.js(ops)` | Return from an action to control the reply (flash, remove, redirect, multi-stream, server-pushed client ops). See [Controlling the action's reply](#reply--controlling-the-actions-reply). |
@@ -1510,9 +1512,27 @@ the user dismissed the dialog) cancels the action, exactly like declining the
 native prompt. The native default is always prevented up front, so a `submit`
 trigger never navigates while the dialog is open.
 
-Unset, behavior is identical to the native `window.confirm` — the `confirm:`
-markup and `on(...)` API are unchanged; only the client's resolution strategy
-gains a seam.
+The resolver also gets an **optional second argument** — a context object — so a
+power-user override can build the string itself instead of relying on the message
+alone. It always carries `{ el }` (the trigger element the confirm fired from);
+on a `reactive_nested_remove` it additionally carries `{ row, fields }` (the row
+element and its `{ key => value }` field map), so a themed dialog can render
+row-specific detail programmatically:
+
+```js
+setConfirmResolver((message, ctx) => {
+  // message is already interpolated (client-added rows resolve %{field}, see below)
+  return myThemedDialog(message, { trigger: ctx.el, fields: ctx.fields })
+})
+```
+
+The second argument is purely additive — a one-parameter resolver keeps working
+untouched. Unset, behavior is identical to the native `window.confirm`; the
+`confirm:` markup and `on(...)` API are unchanged. For per-row confirm messages
+on **client-added** draft rows, the message the resolver receives is already
+interpolated from the row's live field values (`confirm: "Delete '%{name}'?"` →
+`Delete 'Widget'?`) — see [Draft rows for a new
+parent](#draft-rows-for-a-new-parent-reactive_nested_).
 
 ### `reply` — controlling the action's reply
 
@@ -2133,6 +2153,66 @@ end
   `reactive_collection` is the per-actor add/remove + count + empty-state wrapper,
   not a replacement for the broadcast.
 
+### Effects — animate enter/exit/update (opt-in)
+
+Reactive updates land instantly and invisibly: a removed row pops out of
+existence, an appended row pops in, a cross-tab change gives no cue. Effects
+make the reactivity *visible* — rows fade/slide in and out, updates flash —
+with zero app JS. Strictly **opt-in at three levels**, most specific wins:
+
+```ruby
+# 1. GLOBAL — setting it is the opt-in AND the app-wide default set:
+Phlex::Reactive.effects = true   # { enter: :fade, exit: :fade, update: :highlight }
+Phlex::Reactive.effects = { enter: :slide, exit: :fade, update: :highlight }
+
+# 2. PER COMPONENT — refine or opt out (works standalone too; declaring on a
+#    component opts it in even without the global switch):
+class Notifications::Row < ApplicationComponent
+  reactive_effects enter: :slide, exit: :fade   # built-ins (shipped CSS)
+  # reactive_effects update: false              # disable one hook
+  # reactive_effects false                      # opt this component out entirely
+  # reactive_effects enter: :random             # a random built-in per application
+end
+
+# 3. PER CALL — the escape hatch for one stream:
+reply.remove(effect: :shake)                    # a dramatic one-off exit
+reply.append(item, to: :items, effect: :scale)  # this row only
+Item.replace(@todo, effect: false)              # suppress a declared effect once
+Row.broadcast_to(@list, :todos, append: todo, target: "rows", effect: :slide)
+```
+
+The hooks map to stream actions: **enter** (`append`/`prepend`) animates the
+arriving element, **exit** (`remove`) runs *before* the element leaves the DOM
+(the removal waits for the animation, capped at 1s so a missing stylesheet can
+never wedge it), **update** (`replace`/`update`, plain or morph) flashes the
+fresh render. Effects fire for the actor's own reply AND for broadcasts alike
+— if a debounced-save grid flashes too much, declare `reactive_effects
+update: false` on that component.
+
+Link the shipped stylesheet once (five built-ins — `:fade`, `:slide`,
+`:scale`, `:highlight`, `:shake` — wrapped in `prefers-reduced-motion:
+no-preference`, tunable via `--reactive-fx-*` CSS custom properties):
+
+```erb
+<%= stylesheet_link_tag "phlex/reactive/effects" %>
+```
+
+Custom effects skip the stylesheet entirely: pass named class legs (the same
+`{ during:, from:, to: }` vocabulary `js.toggle(transition:)` uses), perfect
+for Tailwind utilities:
+
+```ruby
+reactive_effects enter: { during: %w[transition-all duration-300],
+                          from: %w[opacity-0 translate-y-2],
+                          to: %w[opacity-100 translate-y-0] }
+```
+
+Unknown effect names raise at class load (server) and warn-and-skip on the
+client (default-deny, two-sided). With effects off (the default) the wire is
+byte-identical to previous releases; with them on, the resolved hooks ride the
+component root as `data-reactive-effect-*` attributes — identity, never state,
+and identical on Action Cable and pgbus.
+
 ### Configuration (`config/initializers/phlex_reactive.rb`)
 
 ```ruby
@@ -2180,6 +2260,10 @@ Phlex::Reactive.error_flash = ->(kind) do
   end
 end
 
+# Effects (issue #215): opt in globally + set the app-wide default hooks; see
+# "Effects" above. Off (nil) by default — byte-identical wire when off.
+Phlex::Reactive.effects = { enter: :fade, exit: :fade, update: :highlight }
+
 # Turnkey APM integration. Names each action Component#action in AppSignal/Sentry/
 # Datadog and reports action-body crashes with component/action tags. SDK is
 # runtime-detected (no gem dependency); a custom object responding to

data/app/assets/stylesheets/phlex/reactive/effects.css

@@ -0,0 +1,106 @@
+/* phlex-reactive effects (issue #215) — the shipped built-in animations.
+ *
+ * Opt in from your layout:
+ *
+ *   <%= stylesheet_link_tag "phlex/reactive/effects" %>
+ *
+ * The client applies these classes transiently around stream renders:
+ * reactive-fx--<name>-<hook>, where <name> is fade/slide/scale/highlight/
+ * shake and <hook> is enter (append/prepend), exit (remove), or update
+ * (replace/update). Every class is removed again on animationend, so nothing
+ * here leaks into steady-state styling.
+ *
+ * Everything is wrapped in prefers-reduced-motion: no-preference — the client
+ * ALSO skips effects entirely under reduced motion (defense in depth; a zero
+ * computed duration short-circuits the exit wait, so removals never stall).
+ *
+ * Tune globally (or per component root) by overriding the custom properties:
+ *
+ *   :root { --reactive-fx-duration: 200ms; --reactive-fx-highlight-color: #bae6fd80; }
+ *
+ * Keep durations comfortably under 1s — the client hard-caps any effect wait
+ * at 1000ms (an exit past the cap is removed mid-animation).
+ */
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    --reactive-fx-duration: 300ms;
+    --reactive-fx-highlight-duration: 700ms;
+    --reactive-fx-highlight-color: rgba(250, 204, 21, 0.5);
+  }
+
+  /* fade — opacity in/out. The update variant re-fades the fresh render in. */
+  @keyframes reactive-fx-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes reactive-fx-fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+  .reactive-fx--fade-enter,
+  .reactive-fx--fade-update {
+    animation: reactive-fx-fade-in var(--reactive-fx-duration) ease-out both;
+  }
+  .reactive-fx--fade-exit {
+    animation: reactive-fx-fade-out var(--reactive-fx-duration) ease-in both;
+  }
+
+  /* slide — a short vertical travel + fade. */
+  @keyframes reactive-fx-slide-in {
+    from { opacity: 0; transform: translateY(0.5rem); }
+    to { opacity: 1; transform: none; }
+  }
+  @keyframes reactive-fx-slide-out {
+    from { opacity: 1; transform: none; }
+    to { opacity: 0; transform: translateY(0.5rem); }
+  }
+  .reactive-fx--slide-enter,
+  .reactive-fx--slide-update {
+    animation: reactive-fx-slide-in var(--reactive-fx-duration) ease-out both;
+  }
+  .reactive-fx--slide-exit {
+    animation: reactive-fx-slide-out var(--reactive-fx-duration) ease-in both;
+  }
+
+  /* scale — grow in / shrink out around the element's center. */
+  @keyframes reactive-fx-scale-in {
+    from { opacity: 0; transform: scale(0.92); }
+    to { opacity: 1; transform: none; }
+  }
+  @keyframes reactive-fx-scale-out {
+    from { opacity: 1; transform: none; }
+    to { opacity: 0; transform: scale(0.92); }
+  }
+  .reactive-fx--scale-enter,
+  .reactive-fx--scale-update {
+    animation: reactive-fx-scale-in var(--reactive-fx-duration) ease-out both;
+  }
+  .reactive-fx--scale-exit {
+    animation: reactive-fx-scale-out var(--reactive-fx-duration) ease-in both;
+  }
+
+  /* highlight — the classic background flash that fades to the element's own
+   * background. One animation for every hook: flash on arrival, on change,
+   * and as a last flare before a removal. */
+  @keyframes reactive-fx-highlight {
+    from { background-color: var(--reactive-fx-highlight-color); }
+  }
+  .reactive-fx--highlight-enter,
+  .reactive-fx--highlight-update,
+  .reactive-fx--highlight-exit {
+    animation: reactive-fx-highlight var(--reactive-fx-highlight-duration) ease-out both;
+  }
+
+  /* shake — a quick horizontal oscillation (attention / destructive cue). */
+  @keyframes reactive-fx-shake {
+    10%, 90% { transform: translateX(-1px); }
+    20%, 80% { transform: translateX(2px); }
+    30%, 50%, 70% { transform: translateX(-3px); }
+    40%, 60% { transform: translateX(3px); }
+  }
+  .reactive-fx--shake-enter,
+  .reactive-fx--shake-update,
+  .reactive-fx--shake-exit {
+    animation: reactive-fx-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  }
+}

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

@@ -20,6 +20,14 @@
 // Promise.resolve, so a bare boolean and a Promise<boolean> both work. It must
 // resolve truthy to proceed; a falsy resolve (or a rejection) cancels the
 // action — exactly like declining the native prompt.
+//
+// The resolver receives an OPTIONAL 2nd arg (issue #222): a context object,
+// always `{ el }` (the trigger element), plus `{ row, fields }` on a
+// reactive_nested_remove (the row element + its { key: value } field map). It's
+// purely additive — a one-arg resolver (and window.confirm, which ignores extra
+// args) keeps working unchanged. On a client-added draft row the `message` the
+// resolver receives is already interpolated from the row's live field values
+// (`confirm: "Delete '%{name}'?"` → "Delete 'Widget'?").
 
 // The default: wrap the synchronous native confirm in a Promise so the call
 // site can always `await` it. Read window lazily (per call), not at module load

data/app/javascript/phlex/reactive/confirm.min.js.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["confirm.js"],
   "sourcesContent": [
-    "// The overridable confirmation resolver behind `on(:action, confirm: \"…\")`\n// (issue #55, follow-up to #52).\n//\n// The reactive controller preempts the click event (its own preventDefault +\n// POST), so Hotwire's `data-turbo-confirm` — which routes through\n// `Turbo.config.forms.confirm` — never runs for a reactive trigger. That made\n// the reactive path the ONE interaction a Hotwire app couldn't theme: every\n// confirmable reactive action showed the unstyled native window.confirm chrome.\n//\n// This module is the seam. `dispatch` resolves the confirm message through\n// `confirmResolver`, which defaults to a Promise-wrapped window.confirm (so the\n// 0.4.5 behavior is byte-for-byte unchanged when nothing is configured: sync,\n// no dependency, screen-reader friendly). An app reuses its themed dialog with\n// one line at boot:\n//\n//   import { setConfirmResolver } from \"phlex/reactive/confirm\"\n//   setConfirmResolver((message) => window.Turbo.config.forms.confirm(message))\n//\n// The resolver may be sync or async — the controller awaits it via\n// Promise.resolve, so a bare boolean and a Promise<boolean> both work. It must\n// resolve truthy to proceed; a falsy resolve (or a rejection) cancels the\n// action — exactly like declining the native prompt.\n\n// The default: wrap the synchronous native confirm in a Promise so the call\n// site can always `await` it. Read window lazily (per call), not at module load\n// — under SSR / test the global may not exist yet when this module is imported.\nexport let confirmResolver = (message) =>\n  Promise.resolve(typeof window !== \"undefined\" ? window.confirm(message) : true)\n\n// Override the resolver. Pass a function `(message) => boolean | Promise<boolean>`.\n// Truthy resolves the action through; falsy (or a rejected Promise) cancels it.\nexport function setConfirmResolver(fn) {\n  confirmResolver = fn\n}\n"
+    "// The overridable confirmation resolver behind `on(:action, confirm: \"…\")`\n// (issue #55, follow-up to #52).\n//\n// The reactive controller preempts the click event (its own preventDefault +\n// POST), so Hotwire's `data-turbo-confirm` — which routes through\n// `Turbo.config.forms.confirm` — never runs for a reactive trigger. That made\n// the reactive path the ONE interaction a Hotwire app couldn't theme: every\n// confirmable reactive action showed the unstyled native window.confirm chrome.\n//\n// This module is the seam. `dispatch` resolves the confirm message through\n// `confirmResolver`, which defaults to a Promise-wrapped window.confirm (so the\n// 0.4.5 behavior is byte-for-byte unchanged when nothing is configured: sync,\n// no dependency, screen-reader friendly). An app reuses its themed dialog with\n// one line at boot:\n//\n//   import { setConfirmResolver } from \"phlex/reactive/confirm\"\n//   setConfirmResolver((message) => window.Turbo.config.forms.confirm(message))\n//\n// The resolver may be sync or async — the controller awaits it via\n// Promise.resolve, so a bare boolean and a Promise<boolean> both work. It must\n// resolve truthy to proceed; a falsy resolve (or a rejection) cancels the\n// action — exactly like declining the native prompt.\n//\n// The resolver receives an OPTIONAL 2nd arg (issue #222): a context object,\n// always `{ el }` (the trigger element), plus `{ row, fields }` on a\n// reactive_nested_remove (the row element + its { key: value } field map). It's\n// purely additive — a one-arg resolver (and window.confirm, which ignores extra\n// args) keeps working unchanged. On a client-added draft row the `message` the\n// resolver receives is already interpolated from the row's live field values\n// (`confirm: \"Delete '%{name}'?\"` → \"Delete 'Widget'?\").\n\n// The default: wrap the synchronous native confirm in a Promise so the call\n// site can always `await` it. Read window lazily (per call), not at module load\n// — under SSR / test the global may not exist yet when this module is imported.\nexport let confirmResolver = (message) =>\n  Promise.resolve(typeof window !== \"undefined\" ? window.confirm(message) : true)\n\n// Override the resolver. Pass a function `(message) => boolean | Promise<boolean>`.\n// Truthy resolves the action through; falsy (or a rejected Promise) cancels it.\nexport function setConfirmResolver(fn) {\n  confirmResolver = fn\n}\n"
   ],
-  "mappings": "AA0BO,IAAI,EAAkB,CAAC,IAC5B,QAAQ,QAAQ,OAAO,OAAW,IAAc,OAAO,QAAQ,CAAO,EAAI,EAAI,EAIzE,SAAS,CAAkB,CAAC,EAAI,CACrC,EAAkB",
+  "mappings": "AAkCO,IAAI,EAAkB,CAAC,IAC5B,QAAQ,QAAQ,OAAO,OAAW,IAAc,OAAO,QAAQ,CAAO,EAAI,EAAI,EAIzE,SAAS,CAAkB,CAAC,EAAI,CACrC,EAAkB",
   "debugId": "95D50A0903B9B05E64756E2164756E21",
   "names": []
 }