phlex-reactive 0.12.2 → 0.12.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 753ece18695afa9629ee3bec0fd51722f83618adcb2488265a873ff93bf89dd0
-  data.tar.gz: 55fd2590040f0a9c0831e622981d50b71145fbcb289157237787c59b13ec6426
+  metadata.gz: 8d6ffd3dcf058d459bb58de296bf1d5cb9dd0808164d35c71ffbf60f437e0301
+  data.tar.gz: 11fc37b314bb89a87fa45db4c34328e2976dc82e00106383328b0fb18dd16097
 SHA512:
-  metadata.gz: 8ba6bd8917f55a95d2039f8f86ac393c23c564da694575bb1978b0eeb5f1d5667a0531b0ac0c2a4f8f8e23e03199461eeba0d2dc3decb866b377b404ddb44665
-  data.tar.gz: 4f46e011c63a7500e6262fb3b24fceaf4c13c64b99d1555c0d7fe130326791ba388245c4493a8716231f5510f6d336e91492985a193bfaa5851c9475f3b4b173
+  metadata.gz: 1625e8fb285dc9ca91d73609896452ff5998a6fcb90eca3e3f7ef98a1397db764a966a161f81db9795b0489afd193035a62255bf7223c72271515573e10ecd32
+  data.tar.gz: 6c1448c90d1aad7e1814938b363c28108b924a20ef7bb7a8a4f67b1cfaa2706f62cc3724a43f72aa7aedeb28da2aaf177924268972dd965b261a305381244529

data/CHANGELOG.md

@@ -8,6 +8,50 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+- **Reducer-emitted client ops (`$ops`), a `submit` op, and declarative
+  `reactive_on_complete` (#226).** The "normalize on input, commit when
+  complete" field (a one-time-code entry being the canonical case) is now
+  declarable end to end, single- or multi-input, with no bespoke controller:
+  - **`js.submit(to = :root)`** joins the op vocabulary: requestSubmit the
+    target's own form (the target itself when it *is* a form, `input.form`
+    for a control, else `closest("form")`). A real cancelable `submit` event
+    fires, so it composes with native/Turbo forms AND
+    `on(:save, event: "submit")` interception —
+    `select(**on_client(:change, js.submit("form")))` is the one-line general
+    autosubmit. **Actor-only like focus**: refused in `broadcast_to(js:)`
+    (allowed in `reply.js`); `on_client(:submit, js.submit)` raises (it would
+    re-fire itself).
+  - **The reserved `$ops` reducer output**: a `reactive_compute` reducer may
+    return `$ops` holding an op chain — built with the new immutable `ops`
+    builder exported from `phlex/reactive/compute` (verbs mirror the wire op
+    names) or a raw `[[op, args], …]` list — run through the same frozen
+    client-op whitelist as a final phase after the write set settles.
+    **Rising-edge, keyed on chain content, event-gated**: an identical chain
+    never re-fires (a capped 7th keystroke can't re-submit), a changed chain
+    fires again (per-digit focus advance across split boxes), and the
+    connect/morph seed pass arms without firing (a validation-error re-render
+    with a complete value never self-submits).
+  - **`{ length: … }` in the ONE conditions language**: exact
+    (`{ length: 6 }`) or Integer-Range length predicates for
+    `reactive_show` / `reactive_show_targets` / `reactive_on_complete`,
+    counted in **codepoints** on both sides (Ruby `String#length`, client
+    `[...value].length`) — the shared parity fixture gains a multibyte proof
+    vector.
+  - **`reactive_on_complete`** — the zero-JavaScript declarative twin: the
+    same `if:`/`if_any:`/`unless:` kwargs as `reactive_show` plus `run:` (a
+    `js` chain, now buildable at class level, or an allowlist-checked raw
+    list), emitted as one root attr and evaluated by the generic controller
+    with the same rising-edge/arming semantics as `$ops`.
+    `reactive_on_complete if: { code: { length: 6 } },
+    run: js.dispatch("code:complete")` + `on(:verify, event: "code:complete")`
+    is a complete auto-committing code field with no reducer at all.
+  - Dummy flagships: `VerificationCodeComponent` (single input + `$ops`
+    submit), `SplitCodeComponent` (six boxes: paste redistribution,
+    reducer-driven focus advance, hidden joined-code output),
+    `CodeCompleteComponent` (declarative, zero JS), and the
+    `AutosubmitFilterComponent` select-driven GET filter — each with a
+    real-browser system spec.
+
 - **Instance-dynamic wire names — keyword escape hatches on the
   field-compiling helpers (#224).** A form builder's wire name is computed per
   instance (`user[tags]`), which the class-level `reactive_scope` compile can't
@@ -240,6 +284,11 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- **`rake bench` ran the removed `broadcast_replace_to` API and exited 1.**
+  `benchmark/micro/broadcast.rb` migrated to the #185 spellings
+  (`broadcast_to(*key, replace:)` / `broadcast_to(each:, replace:)`); the
+  transport double is unchanged.
+
 - **`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` /

data/README.md

@@ -853,6 +853,16 @@ button(**on_client(:click, js
   another component or a plain Stimulus controller can react to a client-only
   interaction — `to:` picks the element (default: the component root), `detail:`
   is the payload.
+- **`submit(to = :root)`** commits the **target's own form** via
+  `requestSubmit()`: the target itself when it *is* a form, its form owner for a
+  control (`input.form`, honoring a `form=` attribute), else the nearest ancestor
+  form. Constraint validation runs and a **real cancelable `submit` event**
+  fires, so it composes with both a native/Turbo form *and* an
+  `on(:save, event: "submit")` interception. **Actor-only like focus**: allowed
+  from `on_client` / `reply.js` / a reducer's `$ops`, refused in
+  `broadcast_to(js:)` (a broadcast would force-submit every subscriber's form).
+  Binding a submit op to the `submit` event itself raises at render — it would
+  re-fire itself forever.
 - **`transition: { during:, from:, to: }`** on `show`/`hide`/`toggle` animates the
   visibility flip: `during`+`from` are applied, then `from`→`to` swaps on the next
   frame, and the helper classes are cleaned up on `animationend` (with a timeout
@@ -863,6 +873,27 @@ button(**on_client(:click, js
 modifiers: the dropdown above closes on any click outside the component, and
 window-bound triggers never `preventDefault`, so links elsewhere keep working.
 
+**The general autosubmit story.** With `submit` in the vocabulary, the classic
+`onchange="this.form.requestSubmit()"` filter form is one declared line — no
+bespoke controller, no reactive action, and Turbo Drive turns the resulting
+submit into a normal visit:
+
+```ruby
+form(action: "/products", method: "get") do
+  select(name: "sort", **mix(on_client(:change, js.submit("form")), data: { testid: "sort" })) do
+    option(value: "name") { "Name" }
+    option(value: "price") { "Price" }
+  end
+end
+```
+
+Use `change`-bound autosubmit for discrete controls (selects, radios,
+checkboxes). For a **text** field that should commit "when the value is
+complete," an unconditional `on_client(:input, js.submit)` would fire on every
+keystroke — that conditional case is exactly what a reducer's
+[`$ops`](#client-side-computes-reactive_compute--reactive_text) and
+[`reactive_on_complete`](#declarative-completion-reactive_on_complete) are for.
+
 **Client ops are ephemeral UI — the one contract to internalize.** Any server
 re-render of the component (an action reply, a broadcast, a morph) rebuilds
 from server state and resets whatever the ops toggled: the menu closes, the tab
@@ -958,7 +989,11 @@ end
 - **The value language**: a **Hash is an AND** (multiple keys ANDed), an
   **Array is membership**, a **Range is a threshold** (`10..` ≥ 10, `..10` ≤ 10,
   `...10` < 10, `10..20` between), `true`/`false` compare a checkbox's checked
-  state, `nil` matches blank. `unless:` **negates** and composes with `if:`.
+  state, `nil` matches blank, and **`{ length: … }` compares the value's
+  length** — exact (`{ length: 6 }`) or an Integer Range (`{ length: 6.. }`,
+  `{ length: 4..8 }`). Length counts **codepoints** on both sides (Ruby
+  `String#length`, client `[...value].length`), so multibyte input agrees; a
+  blank field has length 0. `unless:` **negates** and composes with `if:`.
   Never an expression — every term is a declared literal, so there is no eval
   surface. A blank/non-numeric value fails a numeric term **closed** (hidden).
 - **OR-of-AND** — `if_any:` takes an array of AND-hashes (`if_any: [{ director:
@@ -1097,6 +1132,105 @@ setComputeReducer("preview", ({ title }) => ({
   a later morph repaints stale text — the same reconcile contract the whole
   new-vs-persisted split relies on.
 
+**Reducer-emitted ops (`$ops`) — commit when complete.** A reducer's outputs
+write fields and text; the reserved **`$ops`** key lets it emit a **conditional
+side effect** — the missing piece that used to force a bespoke controller next
+to an otherwise-declarative compute. Return an op chain (the `ops` builder
+mirrors the Ruby `js` verbs, or use a raw `[[op, args], …]` array) and the
+controller runs it through the **same frozen op whitelist** `on_client` uses,
+as a final phase **after** the field writes, text sinks, and their dispatched
+`input` events settle. The canonical one-time-code field:
+
+```js
+import { setComputeReducer, ops } from "phlex/reactive/compute"
+
+setComputeReducer("otp", ({ code }) => {
+  const digits = code.replace(/\D/g, "").slice(0, 6)
+  return { code: digits, $ops: digits.length === 6 ? ops.submit() : null }
+})
+```
+
+```ruby
+form(action: "/verify", method: "post",
+  **mix(reactive_root(compute: :otp), on(:verify, event: "submit"))) do
+  input(name: "code", inputmode: "numeric", autocomplete: "one-time-code")
+end
+```
+
+Typing, pasting `123-456`, or platform SMS autofill all arrive as `input`
+events → the reducer normalizes, and at six digits `submit` requestSubmits the
+form — which `on(:verify, event: "submit")` intercepts into **one signed action
+POST**. The contract that makes this safe:
+
+- **Rising edge, keyed on content.** The chain runs only when it **differs**
+  from the previous pass's chain (including from "absent"). Returning the same
+  chain again is settled — a 7th keystroke capped back to the same six digits
+  can't re-submit — while a **different** chain fires again (a multi-box
+  reducer advancing focus emits a new `ops.focus` target per digit). A pass
+  returning `null`/no `$ops` re-arms.
+- **Event-gated.** The connect/morph **seed pass arms without firing** — a form
+  re-rendered with an already-complete value (a validation-error morph, a
+  browser restore) never auto-fires, which is what breaks the
+  submit → error re-render → re-seed → submit loop.
+- **Whitelisted.** `$ops` is consumed before the write phases (never painted as
+  a field/text/mirror), and unknown ops warn-and-skip while siblings apply.
+- **Multi-input works with the same machinery**: declare all boxes as inputs,
+  join + redistribute in the reducer (a paste into any box fans out one digit
+  per box), mirror the joined value into a hidden field, advance focus with a
+  per-digit `ops.focus`, and `ops.submit()` on completion. See
+  `spec/dummy/app/components/split_code_component.rb` for the full six-box
+  example.
+
+When you *don't* want to auto-submit, the same slot dispatches a completion
+event (`ops.dispatch("code:complete")`) for a sibling to react to, or enables
+the submit button (`ops.remove_attr("[type=submit]", "disabled")`) and leaves
+the commit to the user.
+
+### Declarative completion (`reactive_on_complete`)
+
+The `$ops` escape hatch puts the condition in the reducer; when the condition
+is expressible in the [conditions language](#value-conditional-visibility-reactive_show),
+`reactive_on_complete` declares the whole binding in Ruby — **zero JavaScript,
+no reducer**:
+
+```ruby
+class CodeCompleteComponent < ApplicationComponent
+  include Phlex::Reactive::Streamable
+  include Phlex::Reactive::Component
+
+  reactive_state :code
+  action :verify, params: { code: :string }
+
+  reactive_on_complete if: { code: { length: 6 } }, run: js.dispatch("code:complete")
+
+  def view_template
+    div(**mix(reactive_root, on(:verify, event: "code:complete"))) do
+      input(name: "code")
+    end
+  end
+end
+```
+
+The generic controller evaluates the conditions over the owned fields on every
+`input`/`change` (scope-aware, same resolver as `reactive_show`) and runs the
+declared ops on the **rising edge** — once, when the conditions first become
+true; going false re-arms; the connect/morph pass arms **without** firing, so a
+re-render with already-satisfied conditions never self-fires. The pieces:
+
+- **Conditions** are the same `if:` / `if_any:` / `unless:` kwargs
+  `reactive_show` takes — including the `length:` form above, which is what
+  makes "exactly six characters" declarable.
+- **`run:`** is a `js` chain (available at class level) or a raw op list
+  (re-checked through the attribute allowlist). `run: js.submit` auto-commits;
+  `run: js.dispatch(...)` lets a sibling `on(:action, event: "...")` turn
+  completion into a signed action, as above.
+- **Several bindings** coexist under names:
+  `reactive_on_complete :commit, if: …, run: js.submit` — each latches
+  independently; redeclaring a name overrides it (normal registry inheritance).
+- Prefer `$ops` when completion needs **normalization first** (strip
+  separators, cap length) — the reducer already knows the cleaned value;
+  prefer `reactive_on_complete` when the raw field value is the truth.
+
 ### Cross-root mirrors (`mirror:`) — painting a recap outside the root
 
 `reactive_text` is deliberately **root-isolated** (a nested component's nodes are

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

@@ -71,6 +71,39 @@
 // the re-entrant `changed === "field_c"` pass derives field_a back to the
 // value it already holds — no write, no event, settled in one bounce.
 
+// THE RESERVED `$ops` OUTPUT (issue #226). Besides field/text outputs, a
+// reducer may return the reserved key `$ops` holding a chain of client DOM
+// ops — built with the `ops` builder below, or a raw [[name, args], ...]
+// array. The controller consumes it as a PHASE 4 of the single-pass write set:
+// the ops run AFTER the field writes, text sinks, and phase-3 input dispatches
+// settle, through the SAME frozen CLIENT_OPS whitelist on_client uses (an
+// unknown op warns + is skipped). `null`/`undefined`/absent = no effect.
+//
+// RISING-EDGE semantics, keyed on CONTENT: the chain runs only when it
+// DIFFERS from the previous pass's chain (including from "absent"), and only
+// on EVENT-DRIVEN passes. Returning the SAME chain again is settled — no
+// re-fire (a 7th keystroke capped back to the same complete value can't
+// re-submit), mirroring the change-guarded field writes. Returning a
+// DIFFERENT chain fires again — a multi-box reducer advancing focus
+// box-by-box emits a new focus target per digit, each a new intent. The
+// connect/morph SEED pass (issue #199 — recompute with no event) ARMS the
+// latch but never fires — a form re-rendered with an already-complete value
+// (a validation-error morph, a browser restore) must not auto-fire; that is
+// what breaks the submit → error re-render → re-seed → submit loop. A later
+// pass returning no $ops re-arms. The canonical use — a one-time-code field
+// that normalizes on input and commits when complete:
+//
+//   import { setComputeReducer, ops } from "phlex/reactive/compute"
+//   setComputeReducer("otp", ({ code }) => {
+//     const digits = code.replace(/\D/g, "").slice(0, 6)
+//     return { code: digits, $ops: digits.length === 6 ? ops.submit() : null }
+//   })
+//
+// `submit` commits the target's own form via requestSubmit() — the real submit
+// event fires, so an on(:verify, event: "submit") interception (or a native/
+// Turbo form) handles it exactly like a user submit. submit/focus are
+// ACTOR-ONLY: usable here and in on_client/reply.js, refused in broadcasts.
+
 const reducers = new Map()
 
 // Register (or replace) the reducer for `key`. `fn` is
@@ -91,3 +124,122 @@ export function computeReducer(key) {
 export function __resetComputeRegistryForTest() {
   reducers.clear()
 }
+
+// --- The reducer-side op-chain builder (issue #226) --------------------------
+//
+// A thin, IMMUTABLE mirror of the Ruby Phlex::Reactive::JS builder: verbs carry
+// the WIRE op names (snake_case) and append [name, args] pairs; every verb
+// returns a NEW instance, so a chain held in a constant can never be mutated by
+// later use. `.ops` exposes the raw [[name, args], ...] list the controller
+// interprets (and toJSON serializes it, so a chain can also feed a hand-built
+// ops attr). Targets: a CSS selector string, or omit for "@root" (the
+// component's own root). No build-time attr validation here — the interpreter's
+// allowlist (guardAttr) is the enforcement point; this builder only shapes the
+// wire.
+const ROOT_SENTINEL = "@root"
+
+function targetArgs(to, { global, transition } = {}) {
+  const args = { to: to ?? ROOT_SENTINEL }
+  if (global) args.global = true
+  if (transition) args.transition = normalizeTransition(transition)
+  return args
+}
+
+// Named legs { during, from, to } → the [during, from, to] wire array (the
+// issue #186 vocabulary). Loud at authoring time, like the Ruby builder.
+// Frozen, like every nested payload — the chain's immutability contract must
+// hold all the way down (the Ruby twin freezes its legs array too).
+function normalizeTransition(transition) {
+  const named =
+    transition && typeof transition === "object" && !Array.isArray(transition) &&
+    ["during", "from", "to"].every((k) => k in transition)
+  if (!named) throw new Error("[phlex-reactive] ops transition takes named legs { during, from, to }")
+  return Object.freeze([String(transition.during), String(transition.from), String(transition.to)])
+}
+
+class OpsChain {
+  constructor(list = Object.freeze([])) {
+    this.ops = list
+    Object.freeze(this)
+  }
+
+  show(to, opts) {
+    return this.#append("show", targetArgs(to, opts))
+  }
+
+  hide(to, opts) {
+    return this.#append("hide", targetArgs(to, opts))
+  }
+
+  toggle(to, opts) {
+    return this.#append("toggle", targetArgs(to, opts))
+  }
+
+  add_class(to, classes, opts) {
+    return this.#append("add_class", classArgs(to, classes, opts))
+  }
+
+  remove_class(to, classes, opts) {
+    return this.#append("remove_class", classArgs(to, classes, opts))
+  }
+
+  toggle_class(to, classes, opts) {
+    return this.#append("toggle_class", classArgs(to, classes, opts))
+  }
+
+  set_attr(to, name, value, opts) {
+    return this.#append("set_attr", { ...targetArgs(to, opts), name: String(name), value: String(value) })
+  }
+
+  remove_attr(to, name, opts) {
+    return this.#append("remove_attr", { ...targetArgs(to, opts), name: String(name) })
+  }
+
+  toggle_attr(to, name, opts) {
+    return this.#append("toggle_attr", { ...targetArgs(to, opts), name: String(name) })
+  }
+
+  focus(to, opts) {
+    return this.#append("focus", targetArgs(to, opts))
+  }
+
+  focus_first(to, opts) {
+    return this.#append("focus_first", targetArgs(to, opts))
+  }
+
+  text(to, value, opts) {
+    return this.#append("text", { ...targetArgs(to, opts), value: String(value ?? "") })
+  }
+
+  dispatch(name, { to, detail, global } = {}) {
+    const args = { name: String(name), to: to ?? ROOT_SENTINEL, detail: detail ?? {} }
+    if (global) args.global = true
+    return this.#append("dispatch", args)
+  }
+
+  submit(to, opts) {
+    return this.#append("submit", targetArgs(to, opts))
+  }
+
+  toJSON() {
+    return this.ops
+  }
+
+  #append(name, args) {
+    return new OpsChain(Object.freeze([...this.ops, Object.freeze([name, Object.freeze(args)])]))
+  }
+}
+
+// classes: one class string or an array of them (never whitespace-split — a
+// classList token can't contain spaces, so splitting would only mask a bug).
+// Loud on an empty/missing list, and frozen (the Ruby twin freezes its class
+// list too) — a chain held in a constant must stay immutable all the way down.
+function classArgs(to, classes, opts) {
+  const list = classes == null ? [] : (Array.isArray(classes) ? classes : [classes]).map(String)
+  if (list.length === 0) throw new Error("[phlex-reactive] a class op needs at least one class")
+  return { ...targetArgs(to, opts), classes: Object.freeze(list) }
+}
+
+// The shared empty chain — start every reducer effect from here:
+//   $ops: done ? ops.dispatch("code:complete").submit() : null
+export const ops = new OpsChain()

data/app/javascript/phlex/reactive/compute.min.js

@@ -1,4 +1,4 @@
-var j=new Map;function q(b,p){j.set(b,p)}function v(b){return j.get(b)}function w(){j.clear()}export{q as setComputeReducer,v as computeReducer,w as __resetComputeRegistryForTest};
+var F=new Map;function M(j,q){F.set(j,q)}function P(j){return F.get(j)}function Q(){F.clear()}var J="@root";function x(j,{global:q,transition:w}={}){let B={to:j??J};if(q)B.global=!0;if(w)B.transition=K(w);return B}function K(j){if(!(j&&typeof j==="object"&&!Array.isArray(j)&&["during","from","to"].every((w)=>(w in j))))throw Error("[phlex-reactive] ops transition takes named legs { during, from, to }");return Object.freeze([String(j.during),String(j.from),String(j.to)])}class G{constructor(j=Object.freeze([])){this.ops=j,Object.freeze(this)}show(j,q){return this.#j("show",x(j,q))}hide(j,q){return this.#j("hide",x(j,q))}toggle(j,q){return this.#j("toggle",x(j,q))}add_class(j,q,w){return this.#j("add_class",D(j,q,w))}remove_class(j,q,w){return this.#j("remove_class",D(j,q,w))}toggle_class(j,q,w){return this.#j("toggle_class",D(j,q,w))}set_attr(j,q,w,B){return this.#j("set_attr",{...x(j,B),name:String(q),value:String(w)})}remove_attr(j,q,w){return this.#j("remove_attr",{...x(j,w),name:String(q)})}toggle_attr(j,q,w){return this.#j("toggle_attr",{...x(j,w),name:String(q)})}focus(j,q){return this.#j("focus",x(j,q))}focus_first(j,q){return this.#j("focus_first",x(j,q))}text(j,q,w){return this.#j("text",{...x(j,w),value:String(q??"")})}dispatch(j,{to:q,detail:w,global:B}={}){let H={name:String(j),to:q??J,detail:w??{}};if(B)H.global=!0;return this.#j("dispatch",H)}submit(j,q){return this.#j("submit",x(j,q))}toJSON(){return this.ops}#j(j,q){return new G(Object.freeze([...this.ops,Object.freeze([j,Object.freeze(q)])]))}}function D(j,q,w){let B=q==null?[]:(Array.isArray(q)?q:[q]).map(String);if(B.length===0)throw Error("[phlex-reactive] a class op needs at least one class");return{...x(j,w),classes:Object.freeze(B)}}var U=new G;export{M as setComputeReducer,U as ops,P as computeReducer,Q as __resetComputeRegistryForTest};
 
-//# debugId=5EACBA6D0928063864756E2164756E21
+//# debugId=3CB48262B60C70DD64756E2164756E21
 //# sourceMappingURL=compute.min.js.map

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

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["compute.js"],
   "sourcesContent": [
-    "// The client-side compute (data-binding) registry — the \"instant\" half of the\n// new/unpersisted-record UX.\n//\n// A record-backed reactive component round-trips every change to the server\n// (the signed identity re-finds the record; the server re-renders). A NEW,\n// unpersisted record has no such server truth to re-render against on every\n// keystroke — the classic answer is a bespoke Stimulus controller doing the math\n// in the browser (carlqvist's new_order_controller.js). This registry lets that\n// math be a DECLARED part of the component instead: `reactive_compute :name,\n// inputs:, outputs:` (Ruby) names a reducer registered here, and the generic\n// reactive controller runs it on `input` — writing the outputs with NO round\n// trip. When the component ALSO carries on(...) (a persisted record, or a draft\n// you sync), the debounced POST reconciles from the authoritative server reply.\n//\n// The seam mirrors confirm.js: a settable registry with a lookup the controller\n// calls. Register once at boot:\n//\n//   import { setComputeReducer } from \"phlex/reactive/compute\"\n//   setComputeReducer(\"payment_split\", ({ allowance, cash, leasing, total }) => ({\n//     allowance, leasing, cash: total - allowance - leasing,\n//   }))\n//\n// The reducer's signature is (values, meta):\n//\n//   values — a plain object of { inputName: value } over the declared inputs.\n//            Untyped inputs (the array form) AND :number-typed inputs arrive as\n//            Numbers (blank/NaN → 0); :string-typed inputs (the hash form,\n//            issue #104) arrive as the RAW string. `reactive_compute :x, inputs:\n//            { title: :string, qty: :number }` is what selects per-input types;\n//            `inputs: %i[a b]` stays all-numeric (backward compatible).\n//   meta   — { changed }: the name (string) of the declared input the\n//            triggering event edited, or null (a direct recompute() call, or a\n//            target this root doesn't own / didn't declare as an input).\n//\n// OUTPUTS may be a form FIELD or a TEXT NODE (issue #104). An output whose name\n// matches an owned control writes its .value (+ the change-guarded input\n// dispatch below). An output with NO matching field writes textContent to every\n// owned [data-reactive-text=\"<name>\"] node (reactive_text(:name)) — XSS-safe by\n// construction, change-guarded, NO input dispatch (a text node has no listener\n// contract). A declared INPUT also mirrors into its own text node on every\n// input via an always-run pass — so reactive_text(:title) is a live field\n// preview with NO registered reducer at all.\n//\n// It returns a plain object of { outputName: value } — only the outputs it\n// names are written, so it can leave the edited field (and its caret)\n// untouched. A one-argument reducer keeps working unchanged (it just ignores\n// meta). `changed` is what makes a MULTI-WAY / MUTUAL rebalance expressible as\n// one reducer (issue #75) — branch on which field the user edited:\n//\n//   setComputeReducer(\"three_way_split\", ({ field_a, field_b, field_c, total }, { changed }) => {\n//     if (changed === \"field_c\") return { field_a: total - field_c - field_b }\n//     return { field_c: total - field_a - field_b }\n//   })\n//\n// Output writes are CHANGE-GUARDED: the controller writes a field and\n// dispatches a bubbling `input` event on it ONLY when the new value differs\n// from the field's current value (real browsers never fire `input` on a\n// programmatic .value write, so the controller dispatches explicitly — that's\n// what drives a chained summary repaint, matching the server's set_value +\n// dispatch(\"input\") contract). Returning the SAME value a field already holds\n// is skipped entirely — no write, no event — which is why a reducer with\n// overlapping inputs/outputs (like payment_split above) settles instead of\n// re-entering itself forever.\n//\n// CONVERGENCE REQUIREMENT: because an output write dispatches a REAL input\n// event (issue #76), recompute re-enters with changed = that OUTPUT field's\n// name (when it's also a declared input). A branching reducer must therefore\n// be convergent: the re-entrant pass must compute values EQUAL to what the\n// first pass already wrote to the DOM, so the change guard settles the chain.\n// The three_way_split above is: after `changed === \"field_a\"` writes field_c,\n// the re-entrant `changed === \"field_c\"` pass derives field_a back to the\n// value it already holds — no write, no event, settled in one bounce.\n\nconst reducers = new Map()\n\n// Register (or replace) the reducer for `key`. `fn` is\n// (values: Record<string, number>, meta: { changed: string | null })\n//   => Record<string, unknown>.\nexport function setComputeReducer(key, fn) {\n  reducers.set(key, fn)\n}\n\n// Look up a registered reducer; undefined when none — the controller then makes\n// #recompute a no-op rather than throwing (a missing reducer must not break the\n// page; it just means no client-side binding for that root).\nexport function computeReducer(key) {\n  return reducers.get(key)\n}\n\n// Test seam: clear the registry so a reducer registered in one test can't leak.\nexport function __resetComputeRegistryForTest() {\n  reducers.clear()\n}\n"
+    "// The client-side compute (data-binding) registry — the \"instant\" half of the\n// new/unpersisted-record UX.\n//\n// A record-backed reactive component round-trips every change to the server\n// (the signed identity re-finds the record; the server re-renders). A NEW,\n// unpersisted record has no such server truth to re-render against on every\n// keystroke — the classic answer is a bespoke Stimulus controller doing the math\n// in the browser (carlqvist's new_order_controller.js). This registry lets that\n// math be a DECLARED part of the component instead: `reactive_compute :name,\n// inputs:, outputs:` (Ruby) names a reducer registered here, and the generic\n// reactive controller runs it on `input` — writing the outputs with NO round\n// trip. When the component ALSO carries on(...) (a persisted record, or a draft\n// you sync), the debounced POST reconciles from the authoritative server reply.\n//\n// The seam mirrors confirm.js: a settable registry with a lookup the controller\n// calls. Register once at boot:\n//\n//   import { setComputeReducer } from \"phlex/reactive/compute\"\n//   setComputeReducer(\"payment_split\", ({ allowance, cash, leasing, total }) => ({\n//     allowance, leasing, cash: total - allowance - leasing,\n//   }))\n//\n// The reducer's signature is (values, meta):\n//\n//   values — a plain object of { inputName: value } over the declared inputs.\n//            Untyped inputs (the array form) AND :number-typed inputs arrive as\n//            Numbers (blank/NaN → 0); :string-typed inputs (the hash form,\n//            issue #104) arrive as the RAW string. `reactive_compute :x, inputs:\n//            { title: :string, qty: :number }` is what selects per-input types;\n//            `inputs: %i[a b]` stays all-numeric (backward compatible).\n//   meta   — { changed }: the name (string) of the declared input the\n//            triggering event edited, or null (a direct recompute() call, or a\n//            target this root doesn't own / didn't declare as an input).\n//\n// OUTPUTS may be a form FIELD or a TEXT NODE (issue #104). An output whose name\n// matches an owned control writes its .value (+ the change-guarded input\n// dispatch below). An output with NO matching field writes textContent to every\n// owned [data-reactive-text=\"<name>\"] node (reactive_text(:name)) — XSS-safe by\n// construction, change-guarded, NO input dispatch (a text node has no listener\n// contract). A declared INPUT also mirrors into its own text node on every\n// input via an always-run pass — so reactive_text(:title) is a live field\n// preview with NO registered reducer at all.\n//\n// It returns a plain object of { outputName: value } — only the outputs it\n// names are written, so it can leave the edited field (and its caret)\n// untouched. A one-argument reducer keeps working unchanged (it just ignores\n// meta). `changed` is what makes a MULTI-WAY / MUTUAL rebalance expressible as\n// one reducer (issue #75) — branch on which field the user edited:\n//\n//   setComputeReducer(\"three_way_split\", ({ field_a, field_b, field_c, total }, { changed }) => {\n//     if (changed === \"field_c\") return { field_a: total - field_c - field_b }\n//     return { field_c: total - field_a - field_b }\n//   })\n//\n// Output writes are CHANGE-GUARDED: the controller writes a field and\n// dispatches a bubbling `input` event on it ONLY when the new value differs\n// from the field's current value (real browsers never fire `input` on a\n// programmatic .value write, so the controller dispatches explicitly — that's\n// what drives a chained summary repaint, matching the server's set_value +\n// dispatch(\"input\") contract). Returning the SAME value a field already holds\n// is skipped entirely — no write, no event — which is why a reducer with\n// overlapping inputs/outputs (like payment_split above) settles instead of\n// re-entering itself forever.\n//\n// CONVERGENCE REQUIREMENT: because an output write dispatches a REAL input\n// event (issue #76), recompute re-enters with changed = that OUTPUT field's\n// name (when it's also a declared input). A branching reducer must therefore\n// be convergent: the re-entrant pass must compute values EQUAL to what the\n// first pass already wrote to the DOM, so the change guard settles the chain.\n// The three_way_split above is: after `changed === \"field_a\"` writes field_c,\n// the re-entrant `changed === \"field_c\"` pass derives field_a back to the\n// value it already holds — no write, no event, settled in one bounce.\n\n// THE RESERVED `$ops` OUTPUT (issue #226). Besides field/text outputs, a\n// reducer may return the reserved key `$ops` holding a chain of client DOM\n// ops — built with the `ops` builder below, or a raw [[name, args], ...]\n// array. The controller consumes it as a PHASE 4 of the single-pass write set:\n// the ops run AFTER the field writes, text sinks, and phase-3 input dispatches\n// settle, through the SAME frozen CLIENT_OPS whitelist on_client uses (an\n// unknown op warns + is skipped). `null`/`undefined`/absent = no effect.\n//\n// RISING-EDGE semantics, keyed on CONTENT: the chain runs only when it\n// DIFFERS from the previous pass's chain (including from \"absent\"), and only\n// on EVENT-DRIVEN passes. Returning the SAME chain again is settled — no\n// re-fire (a 7th keystroke capped back to the same complete value can't\n// re-submit), mirroring the change-guarded field writes. Returning a\n// DIFFERENT chain fires again — a multi-box reducer advancing focus\n// box-by-box emits a new focus target per digit, each a new intent. The\n// connect/morph SEED pass (issue #199 — recompute with no event) ARMS the\n// latch but never fires — a form re-rendered with an already-complete value\n// (a validation-error morph, a browser restore) must not auto-fire; that is\n// what breaks the submit → error re-render → re-seed → submit loop. A later\n// pass returning no $ops re-arms. The canonical use — a one-time-code field\n// that normalizes on input and commits when complete:\n//\n//   import { setComputeReducer, ops } from \"phlex/reactive/compute\"\n//   setComputeReducer(\"otp\", ({ code }) => {\n//     const digits = code.replace(/\\D/g, \"\").slice(0, 6)\n//     return { code: digits, $ops: digits.length === 6 ? ops.submit() : null }\n//   })\n//\n// `submit` commits the target's own form via requestSubmit() — the real submit\n// event fires, so an on(:verify, event: \"submit\") interception (or a native/\n// Turbo form) handles it exactly like a user submit. submit/focus are\n// ACTOR-ONLY: usable here and in on_client/reply.js, refused in broadcasts.\n\nconst reducers = new Map()\n\n// Register (or replace) the reducer for `key`. `fn` is\n// (values: Record<string, number>, meta: { changed: string | null })\n//   => Record<string, unknown>.\nexport function setComputeReducer(key, fn) {\n  reducers.set(key, fn)\n}\n\n// Look up a registered reducer; undefined when none — the controller then makes\n// #recompute a no-op rather than throwing (a missing reducer must not break the\n// page; it just means no client-side binding for that root).\nexport function computeReducer(key) {\n  return reducers.get(key)\n}\n\n// Test seam: clear the registry so a reducer registered in one test can't leak.\nexport function __resetComputeRegistryForTest() {\n  reducers.clear()\n}\n\n// --- The reducer-side op-chain builder (issue #226) --------------------------\n//\n// A thin, IMMUTABLE mirror of the Ruby Phlex::Reactive::JS builder: verbs carry\n// the WIRE op names (snake_case) and append [name, args] pairs; every verb\n// returns a NEW instance, so a chain held in a constant can never be mutated by\n// later use. `.ops` exposes the raw [[name, args], ...] list the controller\n// interprets (and toJSON serializes it, so a chain can also feed a hand-built\n// ops attr). Targets: a CSS selector string, or omit for \"@root\" (the\n// component's own root). No build-time attr validation here — the interpreter's\n// allowlist (guardAttr) is the enforcement point; this builder only shapes the\n// wire.\nconst ROOT_SENTINEL = \"@root\"\n\nfunction targetArgs(to, { global, transition } = {}) {\n  const args = { to: to ?? ROOT_SENTINEL }\n  if (global) args.global = true\n  if (transition) args.transition = normalizeTransition(transition)\n  return args\n}\n\n// Named legs { during, from, to } → the [during, from, to] wire array (the\n// issue #186 vocabulary). Loud at authoring time, like the Ruby builder.\n// Frozen, like every nested payload — the chain's immutability contract must\n// hold all the way down (the Ruby twin freezes its legs array too).\nfunction normalizeTransition(transition) {\n  const named =\n    transition && typeof transition === \"object\" && !Array.isArray(transition) &&\n    [\"during\", \"from\", \"to\"].every((k) => k in transition)\n  if (!named) throw new Error(\"[phlex-reactive] ops transition takes named legs { during, from, to }\")\n  return Object.freeze([String(transition.during), String(transition.from), String(transition.to)])\n}\n\nclass OpsChain {\n  constructor(list = Object.freeze([])) {\n    this.ops = list\n    Object.freeze(this)\n  }\n\n  show(to, opts) {\n    return this.#append(\"show\", targetArgs(to, opts))\n  }\n\n  hide(to, opts) {\n    return this.#append(\"hide\", targetArgs(to, opts))\n  }\n\n  toggle(to, opts) {\n    return this.#append(\"toggle\", targetArgs(to, opts))\n  }\n\n  add_class(to, classes, opts) {\n    return this.#append(\"add_class\", classArgs(to, classes, opts))\n  }\n\n  remove_class(to, classes, opts) {\n    return this.#append(\"remove_class\", classArgs(to, classes, opts))\n  }\n\n  toggle_class(to, classes, opts) {\n    return this.#append(\"toggle_class\", classArgs(to, classes, opts))\n  }\n\n  set_attr(to, name, value, opts) {\n    return this.#append(\"set_attr\", { ...targetArgs(to, opts), name: String(name), value: String(value) })\n  }\n\n  remove_attr(to, name, opts) {\n    return this.#append(\"remove_attr\", { ...targetArgs(to, opts), name: String(name) })\n  }\n\n  toggle_attr(to, name, opts) {\n    return this.#append(\"toggle_attr\", { ...targetArgs(to, opts), name: String(name) })\n  }\n\n  focus(to, opts) {\n    return this.#append(\"focus\", targetArgs(to, opts))\n  }\n\n  focus_first(to, opts) {\n    return this.#append(\"focus_first\", targetArgs(to, opts))\n  }\n\n  text(to, value, opts) {\n    return this.#append(\"text\", { ...targetArgs(to, opts), value: String(value ?? \"\") })\n  }\n\n  dispatch(name, { to, detail, global } = {}) {\n    const args = { name: String(name), to: to ?? ROOT_SENTINEL, detail: detail ?? {} }\n    if (global) args.global = true\n    return this.#append(\"dispatch\", args)\n  }\n\n  submit(to, opts) {\n    return this.#append(\"submit\", targetArgs(to, opts))\n  }\n\n  toJSON() {\n    return this.ops\n  }\n\n  #append(name, args) {\n    return new OpsChain(Object.freeze([...this.ops, Object.freeze([name, Object.freeze(args)])]))\n  }\n}\n\n// classes: one class string or an array of them (never whitespace-split — a\n// classList token can't contain spaces, so splitting would only mask a bug).\n// Loud on an empty/missing list, and frozen (the Ruby twin freezes its class\n// list too) — a chain held in a constant must stay immutable all the way down.\nfunction classArgs(to, classes, opts) {\n  const list = classes == null ? [] : (Array.isArray(classes) ? classes : [classes]).map(String)\n  if (list.length === 0) throw new Error(\"[phlex-reactive] a class op needs at least one class\")\n  return { ...targetArgs(to, opts), classes: Object.freeze(list) }\n}\n\n// The shared empty chain — start every reducer effect from here:\n//   $ops: done ? ops.dispatch(\"code:complete\").submit() : null\nexport const ops = new OpsChain()\n"
   ],
-  "mappings": "AAyEA,IAAM,EAAW,IAAI,IAKd,SAAS,CAAiB,CAAC,EAAK,EAAI,CACzC,EAAS,IAAI,EAAK,CAAE,EAMf,SAAS,CAAc,CAAC,EAAK,CAClC,OAAO,EAAS,IAAI,CAAG,EAIlB,SAAS,CAA6B,EAAG,CAC9C,EAAS,MAAM",
-  "debugId": "5EACBA6D0928063864756E2164756E21",
+  "mappings": "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",
+  "debugId": "3CB48262B60C70DD64756E2164756E21",
   "names": []
 }