phlex-reactive 0.11.5 → 0.11.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a7758f95f9e1a35e71bf870416d6e042367b7ca19bb2a1c3b618939e72aa5775
-  data.tar.gz: 2203a04fcf550a95e828945e56d06ed1b335fc430a1fdb8669f566893aa17c7d
+  metadata.gz: ce274b76a614b8510a9fc365e717d0b5391b815743a9cd0e9f3ffa716428c0ec
+  data.tar.gz: 9be84dd96ad24ef556935b8b68a60ecdbf48fabe902e1541584d6af6f22e17cf
 SHA512:
-  metadata.gz: 311c87cf131ec0db83082089133b32dcc0583aa49203950ff59495929a2b512d72bedff7ced52747b2074bbce16a6b32eac99249e2b985cb19acfb9afce3a1ab
-  data.tar.gz: 5856533fe3e2207246082a56f6709d732f32db50b8a8c6f1e2f3c8bd74b0f5b2c2330440e0c2b4c9bc078d785d33b85e95ae22f7edc91f746df959f86819fa37
+  metadata.gz: 5e87ae21d988550c315b9ac27a721d5e65b7fdf354ddbaa487cd0e2db7e062ad854198f0a6893ab8e9d0531b6ff698829f7421bd1d8a4fbd3c533992a4485a51
+  data.tar.gz: 107d841025bc3d6d2fecb4b30027e417607773edd12c45503a5615ecee40d9cd5994d42c5ddd40a3ec53c354fa49ef482953844b2ee2ee01311e27c0bbf987c2

data/CHANGELOG.md

@@ -8,6 +8,57 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+- **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
+  alternative puts the add controls OUTSIDE the row (a preset `<select>`, a
+  typeahead, plain inputs) and "Add" **snapshots** those values into a new row,
+  then clears them for the next entry. `from: { row_field => "#source-selector" }`
+  seeds each cloned-row field from its source control's current value (matching
+  the field by the same trailing-bracket-segment key inference JSON mode uses),
+  keeps focus on the sources rather than stealing it into the row, and `clear:
+  true` resets the sources (each via the set-value + dispatch contract, so dirty
+  tracking and compute observe the reset). `from:` values are raw CSS selectors
+  resolved within the reactive root (#15 ownership); an unresolved source or an
+  unmatched row-field key is silently skipped (the row still adds). It composes
+  with BOTH wire modes: the seeded values ride the renumbered `_attributes` names
+  on submit (`:attributes`) and the end-of-add JSON sync serializes them
+  (`as: :json`), with no extra wiring. The no-`from:` inline-edit default is
+  unchanged. See the "Draft rows for a new parent" README section and the
+  `/docs/example-draft-rows` page.
+
+- **Multi-field cross-root targets — `reactive_show_targets` speaks the full
+  conditions language (#209).** A `"#id"` KEY now takes an `if:`/`if_any:`/
+  `unless:` conditions Hash, so an OUTSIDE element can show/hide from a
+  COMBINATION of owned fields — `reactive_show_targets("#trade-warning" =>
+  { if: { type: "trade", price: ..0 } })` — the last case that forced a
+  bespoke two-field JS listener on otherwise-declarative forms. The client
+  folds the target's DNF payload with the SAME per-term owned-field reads as
+  an in-root `reactive_show` (missing owned field reads blank, fail-closed);
+  a target whose referenced fields are ALL unowned is left alone (the
+  single-field skip, generalized). Target-keyed and field-keyed entries mix
+  in the ONE call per root (a field name may never start with `#`, so the
+  key routes unambiguously); existing field-keyed calls emit a byte-identical
+  wire. Declare-time validation stays loud: a bare value, unknown keys, or an
+  empty conditions Hash under a `"#id"` key raises a guided `ArgumentError`.
+
+- **JSON mode for draft nested rows — `reactive_nested_list(:assoc, as: :json)` (#208).**
+  The draft-rows primitive (#208) posts standard Rails
+  `accepts_nested_attributes_for` names. But many apps persist a "new parent +
+  child rows" form by serializing the rows into ONE hidden field and
+  `JSON.parse`-ing it in the controller — adopting the primitive meant rewiring
+  that persistence path. `as: :json` removes the choice: the list keeps the same
+  `<template>` row, `nested_field_name`, and add/remove triggers, but the generic
+  controller now mirrors the surviving rows into a single hidden field as a JSON
+  array on every add / remove / keystroke (the set-value + dispatch contract, so
+  dirty tracking and compute still see it), inferring each JSON key from the
+  trailing bracket segment of a row input's name
+  (`order[line_items_attributes][3][quantity]` → `"quantity"`). A removed row
+  leaves the array (an absent row IS the removal — JSON has no `_destroy`
+  marker). The default (`:attributes`) is unchanged, so existing draft forms are
+  byte-identical. See the "Draft rows for a new parent" README section and the
+  `/docs/example-draft-rows` page.
+
 - **Turnkey APM adapters — `Phlex::Reactive.apm = :appsignal` (#207).** The gem
   already emits `*.phlex_reactive` `ActiveSupport::Notifications` events (#107), but
   every reactive action still POSTs to the same endpoint, so an APM rolled all

data/README.md

@@ -387,7 +387,7 @@ Use in controllers: `render turbo_stream: Counter.replace(counter)`.
 | `reactive_field(:param, **attrs)` | The attribute hash that binds a control to an action param (no magic `name:`) — spread onto any control: `input(**reactive_field(:value, value: @record.name))`, `select(**reactive_field(:status)) { … }`. |
 | `reactive_text(:name, initial)` | Mirror a compute output (or a declared input) into a **text node** — a live preview heading, a character counter, `"Hello, {name}"` — via `textContent` (XSS-safe). The text sibling of `reactive_field`; carries no `name`, so it's never POSTed. See [Client-side computes](#client-side-computes-reactive_compute--reactive_text). |
 | `reactive_show(if:/if_any:/unless:)` | **Value-conditional visibility** (the `x-show`/`data-show` case): spread onto the element to show/hide — it toggles `hidden` from the fields' **current values**, client-only, zero round trip. One conditions language: a **Hash is an AND**, an **Array is membership**, a **Range is a threshold**, `if_any:` is OR-of-AND, `unless:` negates. `reactive_values` computes first paint; `disable:` disables a hidden section's controls. See [Value-conditional visibility](#value-conditional-visibility-reactive_show). |
-| `reactive_show_targets(:field, "#id" => value)` | **Cross-root visibility**: the component that owns the field declares which **outside**, id-allowlisted elements it governs (a nav tab, a panel in another pane) — the visibility parallel of `mirror:`. Spread on the **root** via `mix(reactive_root, …)`, **once per root** — several fields go in one call via the hash form. The value uses the same `where`-style vocabulary (`"advanced"`, `%w[a b]`, `10..`). Id selectors only (raise at render + client warn-skip); toggles `hidden` only. See [Value-conditional visibility](#value-conditional-visibility-reactive_show). |
+| `reactive_show_targets(:field, "#id" => value)` | **Cross-root visibility**: the component that owns the field declares which **outside**, id-allowlisted elements it governs (a nav tab, a panel in another pane) — the visibility parallel of `mirror:`. Spread on the **root** via `mix(reactive_root, …)`, **once per root** — several fields go in one call via the hash form. The value uses the same `where`-style vocabulary (`"advanced"`, `%w[a b]`, `10..`); a `"#id"` **key** takes a full conditions Hash for a **multi-field** predicate (`"#warn" => { if: { type: "trade", price: ..0 } }`). Id selectors only (raise at render + client warn-skip); toggles `hidden` only. See [Value-conditional visibility](#value-conditional-visibility-reactive_show). |
 | `reactive_filter(:field, option: nil, group: nil, empty: nil)` | **Client-side option filtering** for a preloaded combobox: spread onto the root and name the **field** that drives it — `reactive_filter(:q)` compiles `:q` to `[name="q"]` (scope-aware) and typing shows/hides the options by their `data-reactive-filter-text` haystack, **zero round trips**. `option:` defaults to `[role=option]`; optional `group:` collapses an all-hidden group header; `empty:` reveals a no-matches node. See [Client-side option filtering](#client-side-option-filtering-reactive_filter). |
 | `reactive_listnav("[role=option]")` | The **standalone** combobox keyboard wiring (Arrow/Enter/Escape) for an input that fires **no action** — the preload-and-filter case. Same behavior as `on(…, listnav:)`, minus the POST. |
 | `reactive_tags(:tags)` | **Tag-chip input** (the combobox/tags widget): spread onto the root and name the hidden field that stores the **comma-joined** value — the client maintains that field + the chip list entirely client-side (form state, zero round trips), rebuilding chips from your server-owned `<template>`. Composes with `reactive_filter` (type to narrow) and `reactive_listnav` (Enter picks the highlighted option). See [Tag-chip input](#tag-chip-input-reactive_tags). |
@@ -396,8 +396,8 @@ Use in controllers: `render turbo_stream: Counter.replace(counter)`.
 | `reactive_compute :name, ..., mirror: { sum: "#summary-sum" }` | **Cross-root text mirrors**: paint a compute value into declared, id-allowlisted nodes **outside** the reactive root (a recap in another tab pane) via `textContent` — no bespoke listener. See [Cross-root mirrors](#cross-root-mirrors-mirror--painting-a-recap-outside-the-root). |
 | `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)` / `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). See [Draft rows for a new parent](#draft-rows-for-a-new-parent-reactive_nested_). |
-| `reactive_nested_add(:assoc)` / `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). |
+| `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_). |
 | `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). |
@@ -1019,6 +1019,23 @@ reactive_show_targets(mode: { "#advanced-tab" => "advanced" },
                       kind: { "#premium-note" => %w[gold platinum] })
 ```
 
+**Multi-field targets.** A `"#id"` *key* takes a full `if:`/`if_any:`/`unless:`
+conditions Hash — the same language `reactive_show` speaks — so a cross-root
+target can read a **combination** of owned fields (the case that used to force
+a bespoke two-field JS listener):
+
+```ruby
+reactive_show_targets(
+  "#trade-warning" => { if: { type: "trade", price: ..0 } },  # type == "trade" AND price <= 0
+  mode: { "#advanced-tab" => "advanced" }                     # field-keyed entries mix in the ONE call
+)
+```
+
+The fold is identical to an in-root `reactive_show` (each term reads its own
+field; a missing owned field reads as blank — fail-closed). Every referenced
+field must be owned by the declaring root; a target whose fields are all
+unowned is left alone, like the single-field skip.
+
 ### Client-side computes (`reactive_compute` + `reactive_text`)
 
 Some math should feel instant with **no round trip** — a NEW, unsaved record's
@@ -1334,6 +1351,65 @@ is saved, the persisted flow takes over: the same row markup renders with real
 indexes, or the list graduates to a [reactive collection](#reactive-collections-addremove-rows--count--empty-state)
 (`reactive_collection` + `reply.append`/`reply.remove`).
 
+**JSON mode — one hidden field instead of `accepts_nested_attributes_for`.**
+If your controller already parses a **serialized JSON param** (the app-rolled
+"stuff the rows into a hidden field, `JSON.parse` on submit" pattern) rather
+than nested attributes, opt the list into `as: :json` and keep your persistence
+path exactly as it is:
+
+```ruby
+div(**reactive_nested_list(:line_items, as: :json)) { }   # + a hidden field to sync
+# the hidden field the client keeps in sync (seed "[]" so an empty submit posts one):
+input(type: "hidden", **reactive_field(:line_items), value: "[]")
+```
+
+```ruby
+# The controller stays hand-rolled — NO accepts_nested_attributes_for:
+rows = JSON.parse(params.require(:order).permit(:line_items)[:line_items].presence || "[]")
+order = Order.create!(total: params[:order][:total])
+rows.each { order.line_items.create!(quantity: it["quantity"], price: it["price"]) }
+```
+
+Everything else is identical — the same `<template>` row, the same
+`nested_field_name`, the same add/remove triggers. In JSON mode the client
+mirrors the surviving rows into that one hidden field as a JSON array on every
+add / remove / keystroke (the set-value + dispatch contract, so dirty tracking
+and compute still see it), inferring each JSON key from the **trailing bracket
+segment** of a row input's name (`order[line_items_attributes][3][quantity]` →
+`"quantity"`). A removed row simply leaves the array (JSON carries no `_destroy`
+marker — an absent row *is* the removal). The per-row `_attributes` names still
+render but are ignored by a controller that doesn't permit them; the JSON field
+is the single source of truth.
+
+**Fill-then-add — snapshot add controls that live OUTSIDE the row.** The default
+`reactive_nested_add` is *inline-edit*: it clones the template and focuses the
+new row's first field, so you type INTO the row. A common alternative puts the
+add controls outside the row — a preset `<select>`, a typeahead, plain inputs —
+and "Add" **snapshots** those values into a new row, then clears them for the
+next entry. Pass `from:` (a map of row-field → source-control selector) and
+optionally `clear:`:
+
+```ruby
+input(id: "item-name",  type: "text")     # the add controls, OUTSIDE the row
+input(id: "item-qty",   type: "number")
+
+button(**reactive_nested_add(:line_items,
+  from: { name: "#item-name", quantity: "#item-qty" },  # row field => source selector
+  clear: true)) { "Add item" }
+```
+
+On click the client clones the template, fills each cloned-row field from its
+source control's current value (matching the field by the **same** trailing
+bracket-segment key inference JSON mode uses), keeps focus on the sources (so
+you keep entering the next item — it does *not* steal focus into the row), and,
+with `clear: true`, resets the sources (each via the set-value + dispatch
+contract, so dirty tracking and compute see it). The `from:` values are raw CSS
+selectors resolved within this root (`#15` ownership); a selector that resolves
+nothing, or a row-field key with no matching cloned field, is skipped (the row
+still adds — never a throw). It composes with **both** wire modes: the seeded
+values ride the renumbered `_attributes` names on submit (`:attributes`) and the
+end-of-add JSON sync serializes them (`as: :json`), with no extra wiring.
+
 Relatedly, a **draft parent can now run real server actions too** (issue #208):
 an unsaved record signs a gid-less `{c, state}` token, and the endpoint rebuilds
 the component through the record kwarg's **initialize default** —

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

@@ -989,6 +989,23 @@ function anyOfAllsMatches(groups, fieldValue) {
     group.every((term) => dnfTermMatches(term, fieldValue)))
 }
 
+// Every field a DNF payload's groups reference (issue #209) — drives the
+// "leave the target alone when NO referenced field is owned" skip, the
+// single-field-target skip generalized. Returns null for a malformed payload
+// (no groups, or no term names a field) so the caller warn-skips instead of
+// toggling on garbage (default-deny, like every other malformed-wire arm).
+function dnfGroupFields(groups) {
+  if (!Array.isArray(groups) || groups.length === 0) return null
+  const fields = new Set()
+  for (const group of groups) {
+    if (!Array.isArray(group)) continue
+    for (const term of group) {
+      if (term && typeof term === "object" && typeof term.field === "string") fields.add(term.field)
+    }
+  }
+  return fields.size > 0 ? [...fields] : null
+}
+
 // Route a parsed data-reactive-show payload to the right evaluator. The 0.10
 // wire is { any: [ [term,…], … ] } (DNF — groups are ARRAYS). For a stale tab
 // still serving pre-0.10 HTML (deploy overlap), fall back to the 0.9.5 compound
@@ -1142,6 +1159,11 @@ export default class extends Controller {
   // indexes) plus the once-only missing-list/template warning latch.
   #nestedIndex = 0
   #nestedWarned = false
+  // JSON-mode nested rows (issue #208): the bound delegated input/change
+  // handler and the bound morph re-seed, held so disconnect() removes exactly
+  // them.
+  #boundSyncNestedJson
+  #boundSeedNestedJson
   // Connect-time compute seed (issue #199): the bound re-seed attached to
   // turbo:morph-element so an in-place morph re-runs the compute, held for teardown.
   #boundSeedCompute
@@ -1266,6 +1288,24 @@ export default class extends Controller {
       this.#syncTags()
     }
 
+    // JSON-mode nested rows (issue #208) — ONLY when the root owns a list with
+    // `as: :json`, so a form without one pays a single probe (the show/filter/
+    // tags gate precedent). ONE delegated input + change listener re-serializes
+    // the rows into the hidden field on every owned edit (nestedAdd/Remove call
+    // the sync directly; this covers typing into a row's fields). The connect
+    // seed writes the initial array (a plain replace re-connects), and
+    // turbo:morph-element re-seeds after an in-place morph (which keeps the
+    // element connected, fires no Stimulus lifecycle, and may have rewritten
+    // the rows to server truth while the hidden field kept its pre-morph value).
+    if (this.#nestedJsonEnabled()) {
+      this.#boundSyncNestedJson = (event) => this.syncNestedJson(event)
+      this.#boundSeedNestedJson = () => this.#syncAllNestedJson()
+      this.element.addEventListener?.("input", this.#boundSyncNestedJson)
+      this.element.addEventListener?.("change", this.#boundSyncNestedJson)
+      this.element.addEventListener?.("turbo:morph-element", this.#boundSeedNestedJson)
+      this.#syncAllNestedJson()
+    }
+
     // Connect-time compute seed (issue #199) — ONLY when the root carries a
     // reactive_compute binding that opts in (data-reactive-compute-seed). A
     // freshly-rendered compute root (a first paint, or a server validation-error
@@ -1318,6 +1358,7 @@ export default class extends Controller {
     this.#teardownShowSync()
     this.#teardownFilterSync()
     this.#teardownTagsSync()
+    this.#teardownNestedJsonSync()
     this.#teardownComputeSeed()
     if (this.#boundProbeLazyDefer) {
       this.element.removeEventListener?.("turbo:morph-element", this.#boundProbeLazyDefer)
@@ -1828,8 +1869,87 @@ export default class extends Controller {
     const row = proto.cloneNode(true)
     this.#renumberNestedRow(row, this.#nextNestedIndex())
     list.appendChild(row)
-    const first = [...(row.querySelectorAll?.("input, select, textarea") ?? [])][0]
-    first?.focus?.()
+
+    // Fill-then-add (issue #208 Scenario A): seed the cloned row from named
+    // source controls OUTSIDE the row, then (optionally) clear the sources.
+    // Runs AFTER renumber+append so a seeded field's name already carries its
+    // final `[<index>][field]` form — the key match agrees with what JSON mode
+    // reads. `seeded` is the FIRST source we cleared/read, so fill-then-add can
+    // return focus to the sources instead of stealing it into the new row.
+    const fromJson = trigger?.getAttribute?.("data-reactive-nested-from-param")
+    const clear = trigger?.getAttribute?.("data-reactive-nested-clear-param") === "true"
+    const firstSource = this.#seedNestedRow(row, fromJson, clear)
+
+    // Focus: inline-edit (no from:) focuses the new row's first field so you
+    // type INTO it; fill-then-add keeps focus on the sources (the first one) so
+    // you keep entering the next item — stealing focus would break that loop.
+    if (fromJson) firstSource?.focus?.()
+    else [...(row.querySelectorAll?.("input, select, textarea") ?? [])][0]?.focus?.()
+
+    // JSON mode (issue #208): a freshly-added row must land in the hidden field
+    // immediately (seeded values included), so the serialized array reflects the
+    // DOM even before the first keystroke. A no-op when not `as: :json`.
+    if (list.getAttribute?.("data-reactive-nested-json") === assoc) this.#syncNestedJson(assoc)
+  }
+
+  // Fill-then-add (issue #208): copy each source control's value into the
+  // matching cloned-row field, keyed by the trailing bracket segment of the
+  // field's name (#nestedJsonKey — the SAME inference JSON mode uses, so the
+  // two features can't drift). Sources resolve root-scoped and owned (#15); an
+  // unresolved source or an unmatched key is silently skipped (the row still
+  // adds — a half-mapped binding must never throw on click). Returns the FIRST
+  // source control read (for focus), or null. With `clear`, resets every source
+  // it read via the set-value + dispatch contract (#183) so dirty/show/compute
+  // observe the reset.
+  #seedNestedRow(row, fromJson, clear) {
+    if (!fromJson) return null
+    let map
+    try {
+      map = JSON.parse(fromJson)
+    } catch {
+      return null
+    }
+    if (!map || typeof map !== "object") return null
+
+    const owns = this.#ownershipFilter()
+    const rowFields = [...(row.querySelectorAll?.("input, select, textarea") ?? [])]
+    const sources = []
+    for (const [key, selector] of Object.entries(map)) {
+      const source = [...(this.element.querySelectorAll?.(selector) ?? [])].find(owns)
+      if (!source) continue
+      const target = rowFields.find((field) => this.#nestedJsonKey(field.getAttribute?.("name")) === key)
+      if (!target) continue
+      this.#seedNestedField(target, source)
+      sources.push(source)
+    }
+    if (clear) for (const source of sources) this.#clearNestedSource(source)
+    return sources[0] ?? null
+  }
+
+  // Copy a source control's value into a cloned-row field, then dispatch a
+  // bubbling `input` (the set-value + dispatch contract, #183). Checkbox ↔
+  // checkbox copies the checked state; every other target takes the source's
+  // submit-shaped value (#nestedFieldValue), so a checkbox source feeding a
+  // text field lands "on"/"" exactly as a submit would.
+  #seedNestedField(target, source) {
+    if (target.type === "checkbox") {
+      target.checked = source.type === "checkbox" ? !!source.checked : this.#nestedFieldValue(source) !== ""
+    } else {
+      target.value = this.#nestedFieldValue(source)
+    }
+    if (typeof target.dispatchEvent === "function") {
+      target.dispatchEvent(new Event("input", { bubbles: true }))
+    }
+  }
+
+  // Reset a source control after a fill-then-add (issue #208), dispatching a
+  // bubbling `input` so dirty tracking / reactive_show / compute see the reset.
+  #clearNestedSource(source) {
+    if (source.type === "checkbox") source.checked = false
+    else source.value = ""
+    if (typeof source.dispatchEvent === "function") {
+      source.dispatchEvent(new Event("input", { bubbles: true }))
+    }
   }
 
   // Remove the trigger's closest row wrapper. A DRAFT row (no [_destroy]
@@ -1857,6 +1977,108 @@ export default class extends Controller {
     } else {
       row.parentNode?.removeChild?.(row)
     }
+
+    // JSON mode (issue #208): the removed (or _destroy-hidden) row must leave
+    // the serialized array too — an absent row IS the removal. Re-sync every
+    // owned JSON-mode list; a form without one iterates an empty set and exits.
+    this.#syncAllNestedJson()
+  }
+
+  // JSON-mode nested rows (issue #208) — the delegated input/change handler.
+  // An app whose controller parses a serialized JSON param instead of Rails'
+  // accepts_nested_attributes_for opts a list into `as: :json`; the client
+  // then mirrors that list's rows into ONE hidden field as a JSON array on
+  // every owned edit. Public so Stimulus can bind it; a no-op unless the
+  // edited field belongs to a JSON-mode list this root owns.
+  syncNestedJson(event) {
+    const target = event?.target
+    if (!target || !this.#ownsField(target)) return
+    // Re-serialize every JSON-mode list (an edit could touch any of them; the
+    // per-list owned-row scan is cheap and keeps this handler association-free).
+    this.#syncAllNestedJson()
+  }
+
+  // Serialize every owned JSON-mode list into its hidden field. The connect
+  // seed and the input/remove re-syncs funnel through here so one place owns
+  // the "DOM rows → JSON field" projection.
+  #syncAllNestedJson() {
+    if (typeof this.element?.querySelectorAll !== "function") return
+    const owns = this.#ownershipFilter()
+    for (const list of [...this.element.querySelectorAll("[data-reactive-nested-json]")].filter(owns)) {
+      this.#syncNestedJson(list.getAttribute("data-reactive-nested-json"))
+    }
+  }
+
+  // Project ONE JSON-mode list's surviving rows into its hidden field. Each
+  // row becomes an object keyed by the trailing bracket segment of its inputs'
+  // names (…[title] → "title"); a hidden/_destroy-marked row is skipped (an
+  // absent row IS the removal — JSON carries no destroy marker). The write
+  // uses the set-value + dispatch contract (issue #183) so dirty tracking,
+  // reactive_show, and compute see the change — but only when the value
+  // actually changed, so a connect seed on an already-correct field is silent.
+  #syncNestedJson(assoc) {
+    const owns = this.#ownershipFilter()
+    const list = [...this.element.querySelectorAll(`[data-reactive-nested-list="${assoc}"]`)].find(owns)
+    if (!list) return
+    const field = this.#nestedJsonField(list)
+    if (!field) return
+
+    const rows = []
+    for (const row of [...(list.querySelectorAll?.("[data-reactive-nested-row]") ?? [])]) {
+      if (!owns(row) || row.hidden) continue
+      rows.push(this.#nestedRowObject(row))
+    }
+
+    const next = JSON.stringify(rows)
+    if (field.value === next) return
+    field.value = next
+    if (typeof field.dispatchEvent === "function") {
+      field.dispatchEvent(new Event("input", { bubbles: true }))
+    }
+  }
+
+  // The hidden field a JSON-mode list mirrors into — resolved fresh (a morph
+  // replaces nodes, never cache it) and OWNED by this root (#15). null when
+  // the selector resolves nothing, so the caller no-ops (a half-built binding
+  // must never break the page).
+  #nestedJsonField(list) {
+    const selector = list.getAttribute?.("data-reactive-nested-json-field")
+    if (!selector) return null
+    const owns = this.#ownershipFilter()
+    return [...this.element.querySelectorAll(selector)].find(owns) ?? null
+  }
+
+  // One row → { key: value } over its named form controls. The JSON key is the
+  // trailing bracket segment of each control's name (order[todos_attributes]
+  // [3][title] → "title"; a bare `title` → "title"), the "infer from input
+  // names" contract. The [_destroy] control is dropped (JSON has no destroy
+  // marker). Later inputs with the same key win (last-wins, the DOM order).
+  #nestedRowObject(row) {
+    const obj = {}
+    for (const el of [...(row.querySelectorAll?.("input, select, textarea") ?? [])]) {
+      const key = this.#nestedJsonKey(el.getAttribute?.("name"))
+      if (key === null || key === "_destroy") continue
+      obj[key] = this.#nestedFieldValue(el)
+    }
+    return obj
+  }
+
+  // The trailing bracket segment of a field name (the inferred JSON key), or
+  // the bare name when it carries no brackets. null for a nameless control
+  // (a bare button, an unnamed helper input) — skipped by the caller.
+  #nestedJsonKey(name) {
+    if (!name) return null
+    const match = name.match(/\[([^\][]+)\]$/)
+    return match ? match[1] : name
+  }
+
+  // A form control's submitted value: an unchecked checkbox contributes "" (it
+  // wouldn't post at all), a checked one its value (default "on"); everything
+  // else its .value. Keeps the JSON shape close to what a real form submit
+  // would carry for the same control.
+  #nestedFieldValue(el) {
+    if (el.type === "checkbox") return el.checked ? (el.value || "on") : ""
+    return el.value ?? ""
   }
 
   // Parse a JSON string list from a root data attr; [] on absence/parse error so
@@ -2876,7 +3098,7 @@ export default class extends Controller {
 
     // The cross-root pass (issue #164) shares the same owned-field memo, so a
     // field driving both an owned binding and an outside target reads once.
-    this.#syncShowTargets(owns, values, scope)
+    this.#syncShowTargets(fieldValue)
   }
 
   // Toggle `hidden` (and, when the binding declares data-reactive-show-disable,
@@ -2905,12 +3127,20 @@ export default class extends Controller {
   // unrendered tab pane is normal); a malformed predicate warn-skips its one
   // target while siblings still apply. With no map declared this is one
   // getAttribute and out.
-  #syncShowTargets(owns, values, scope) {
+  //
+  // A "#id" KEY (issue #209) is a TARGET-KEYED entry instead: its value is the
+  // same DNF payload data-reactive-show holds, folded with per-term owned-field
+  // reads — the multi-field cross-root case. The "#" prefix routes unambiguously
+  // (a field name may never start with "#"; the Ruby helper raises).
+  #syncShowTargets(fieldValue) {
     const map = this.#parseShowTargets()
     for (const [name, targets] of Object.entries(map)) {
+      if (name.startsWith("#")) {
+        this.#applyConditionsTarget(name, targets, fieldValue)
+        continue
+      }
       if (!targets || typeof targets !== "object" || Array.isArray(targets)) continue
-      if (!values.has(name)) values.set(name, this.#showFieldValue(name, owns, scope))
-      const value = values.get(name)
+      const value = fieldValue(name)
       if (value === null) continue // no owned field with that name — leave them be
       // Every target's terms share this one field, so a constant resolver folds
       // the group (issue #180): a target's value is a DNF GROUP (terms ANDed).
@@ -2940,6 +3170,28 @@ export default class extends Controller {
     }
   }
 
+  // Apply ONE target-keyed conditions entry (issue #209): "#id" → the DNF
+  // payload { any: [[term,…],…] }, folded by the SAME anyOfAllsMatches as an
+  // in-root reactive_show — each term reads its OWN owned field, a missing
+  // owned field reads as blank (fail-closed, the shared-fixture contract). A
+  // target whose referenced fields are ALL unowned is left alone — the
+  // single-field skip generalized (this root has nothing to evaluate with). A
+  // malformed payload warn-skips its one target while siblings still apply;
+  // the selector guard is the same id-only allowlist as every cross-root arm.
+  #applyConditionsTarget(selector, payload, fieldValue) {
+    if (!guardShowTargetSelector(selector)) return
+    const groups = payload && typeof payload === "object" && !Array.isArray(payload) ? payload.any : null
+    const fields = dnfGroupFields(groups)
+    if (fields === null) {
+      console.warn(`[phlex-reactive] malformed reactive_show_targets conditions for ${selector} — skipped`)
+      return
+    }
+    if (fields.every((name) => fieldValue(name) === null)) return // no owned field — leave it be
+    const match = anyOfAllsMatches(groups, fieldValue)
+    if (match === null) return // unreachable after dnfGroupFields, kept fail-closed
+    for (const node of document.querySelectorAll(selector)) node.hidden = !match
+  }
+
   // The declared cross-root show-target map (issue #164): a JSON object of
   // { field: { "#id": predicate } } from data-reactive-show-targets (emitted
   // by reactive_show_targets on the root). Absent degrades to {}; malformed
@@ -3099,6 +3351,15 @@ export default class extends Controller {
     return !!this.element.getAttribute?.("data-reactive-tags-field")
   }
 
+  // Whether this root owns at least one JSON-mode nested list (issue #208) —
+  // the connect() gate. A cheap descendant probe: a form without one wires no
+  // input/change listeners. Ownership is re-checked per sync, so a stray match
+  // in a nested reactive root here is harmless (it just arms the listeners).
+  #nestedJsonEnabled() {
+    if (typeof this.element?.querySelector !== "function") return false
+    return !!this.element.querySelector("[data-reactive-nested-json]")
+  }
+
   // The hidden input storing the comma-joined value, resolved fresh per use
   // (a morph replaces nodes — never cache it) and OWNED by this root (issue
   // #15). null when the selector resolves nothing — every caller then no-ops:
@@ -3287,6 +3548,21 @@ export default class extends Controller {
     this.#boundSyncTags = undefined
   }
 
+  // Remove the JSON-mode nested-rows listeners on disconnect (issue #208), so a
+  // stray input/change/morph after the element leaves the DOM never re-syncs
+  // against a detached root.
+  #teardownNestedJsonSync() {
+    if (this.#boundSyncNestedJson) {
+      this.element.removeEventListener?.("input", this.#boundSyncNestedJson)
+      this.element.removeEventListener?.("change", this.#boundSyncNestedJson)
+      this.#boundSyncNestedJson = undefined
+    }
+    if (this.#boundSeedNestedJson) {
+      this.element.removeEventListener?.("turbo:morph-element", this.#boundSeedNestedJson)
+      this.#boundSeedNestedJson = undefined
+    }
+  }
+
   // Remove the compute seed morph listener on disconnect (issue #199), so a
   // stray turbo:morph-element after the element leaves the DOM never re-seeds
   // against a detached root.