phlex-reactive 0.9.4 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d95213b7c5a3711a00f1992f0a1992363c203aa3bd253875f0ceb67db88986f
-  data.tar.gz: 93574b53d1e24f5c61d4dca65b65521a32782d5945d99c911484c76ec10ac8ce
+  metadata.gz: 42d923475e8b2eb3ea48a0ef076358a10dbfd7760c34709dc54af5910805ad01
+  data.tar.gz: a6822d8caa3e24dc863284f7bb6eafde39bc69562d4c5d14504b99e489c1e302
 SHA512:
-  metadata.gz: 037cfc4cb78a82f4d98b197b59f1dfe1d9ed7bb9222751207bf0b583d1e8ba89bdb30d1cb79ad5543ad5b7e4e5a84a08cc59e0b463bef0e5e5f36f1c31a60850
-  data.tar.gz: d0d5eb3a48674bb0dc93417b3e61911e43c976457b3203a1e45bf59f0e0e5c33ceebc50e458240b8f8f15158ad81bdb98fb53addc47a36865c4b94e490e7fd67
+  metadata.gz: 234bcb0ca3b36e91f8f53cbbb2dd31f86f03b5a1043911e13652f3b4c2d31fe882b883035c4ab8ba2e2fc8a0f0755ac6302f2bf6d04c09d93aa2d659cd69e358
+  data.tar.gz: b63a02ff87733de83ad39dbea2f9754ef62fbfc79d7cf8f1d4a98e22891dae50e215bbca11b5faecefe9a454a2b0794c3fbbf870ee4da2ca8ec025aea69185b7

data/CHANGELOG.md

@@ -6,8 +6,77 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Fixed
+
+- **`exclude:`/`visible_to:` now actually reach pgbus — actor-echo suppression works over SSE (#187).**
+  `broadcast_*_to`/`broadcast_*_to_each` passed `exclude:`/`visible_to:` as keyword
+  arguments to `Turbo::StreamsChannel.broadcast_*_to`, but turbo-rails swallows
+  unknown kwargs into its render locals — so on the pgbus transport the options were
+  **silently dropped** and `exclude: reactive_connection_id` never suppressed the
+  actor's own broadcast echo. They are now threaded through the thread-locals pgbus
+  reads (`Thread.current[:pgbus_broadcast_exclude]`/`_visible_to`), capability-gated
+  on `pgbus_streams?` so the Action Cable path is unchanged. Found by the new
+  end-to-end pgbus transport suite (below) — the prior unit doubles only proved the
+  option was *forwarded to the method*, never that it *reached pgbus*.
+
+### Added
+
+- **CI transport verification matrix — the browser suite runs on Action Cable AND pgbus (#187).**
+  The system job is now `server × transport` (Puma/Falcon × cable/pgbus). The pgbus
+  cells add a plain `postgres:18` (pgbus vendors the PGMQ schema via its own
+  migrations — no extension image) and set `TRANSPORT=pgbus`, so the existing browser
+  suite proves the reactive round trip is transport-agnostic, and new `:pgbus`-tagged
+  specs prove real cross-tab broadcast delivery + actor-echo exclusion over live
+  Postgres SSE. `rake spec:system_matrix` runs the 2×2 locally (pgbus cells skip with
+  a note when Postgres isn't reachable); `rake pgbus:prepare_test_db` sets up the DB.
+  pgbus remains an optional, non-gemspec dependency — it is now a first-class *tested*
+  transport, not a required one.
+
 ### Changed
 
+- **BREAKING: `reactive_show` speaks ONE conditions language — `if:`/`if_any:`/`unless:` (#180).**
+  The four accreted dialects (the positional-field predicate kwargs
+  `equals:`/`not:`/`in:`/`gte:`/`gt:`/`lte:`/`lt:`, the `all:`/`any:` term
+  arrays, and the `{ equals: … }` target predicate hashes) are **removed** and
+  replaced by a single Ruby-native language: a **Hash is an AND**, an **Array is
+  membership**, a **Range is a threshold**, `if_any:` is OR-of-AND (one level of
+  disjunction — the distributive-law killer), and `unless:` negates. Each removed
+  form raises a **guided `ArgumentError`** printing the exact rewrite. Migration:
+
+  | Before (removed) | After |
+  |---|---|
+  | `reactive_show(:mode, not: "off")` | `reactive_show(unless: { mode: "off" })` |
+  | `reactive_show(:gift, equals: true)` | `reactive_show(if: { gift: true })` |
+  | `reactive_show(:size, in: %w[l xl])` | `reactive_show(if: { size: %w[l xl] })` |
+  | `reactive_show(:qty, gte: 10)` | `reactive_show(if: { qty: 10.. })` |
+  | `reactive_show(:amt, gt: 5000)` | `reactive_show(unless: { amt: ..5000 })` |
+  | `reactive_show(all: [{ field: :a, equals: "x" }, …])` | `reactive_show(if: { a: "x", … })` |
+  | `reactive_show(any: [{ field: :a, equals: "x" }, …])` | `reactive_show(if_any: [{ a: "x" }, …])` |
+  | `reactive_show_targets(:m, "#id" => { equals: "x" })` | `reactive_show_targets(:m, "#id" => "x")` |
+
+  New alongside it: **`reactive_values`** computes each binding's first-paint
+  `hidden:` server-side (no per-section mirror method, no flash);
+  **`reactive_scope :form`** lets bindings use bare field symbols
+  (`[name="form[field]"]` on the client); **`disable: true`** disables a hidden
+  section's own controls so a switched-away value never submits. The wire is now
+  ONE DNF shape (`data-reactive-show='{"any":[[term,…],…]}'`); the client keeps
+  legacy read arms for one minor (deploy overlap), removed in 0.11.
+
+- **`Phlex::Reactive::ClientBindings` — a blessed client-only include (#180).** A
+  view that only shows/hides, filters, or computes client-side (no server
+  actions, no token) includes this instead of the full `Component`. It does NOT
+  pull in `Streamable` (so it never clobbers an app's own `replace`/`to_stream_*`
+  concern) or the token machinery — a token-less `reactive_root` with no `#id`
+  requirement, invisible to `phlex_reactive:doctor`. The full `Component`
+  includes it (one implementation), then layers Streamable + Identity on top.
+
+- **Automatic token refresh — `reply.with` and `reply.streams` converge (#180).**
+  The action endpoint now appends a `reactive:token` refresh stream automatically
+  whenever a reply does not re-render the component's root, instead of prepending
+  a full self-replace that could clobber a live input. Picking `.streams` vs
+  `.with` to keep the signed token fresh is no longer a correctness decision — a
+  companion-only reply refreshes the token either way.
+
 - **BREAKING: `verify_authorized` is ON by default (#168).** A reactive action
   that completes **without any authorization call now raises**
   `Phlex::Reactive::AuthorizationNotVerified` — **rolling back the transaction**
@@ -31,6 +100,21 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+- **Compound & numeric `reactive_show` predicates — `all:`/`any:` and
+  `gte:`/`gt:`/`lte:`/`lt:` (#176).** Value-conditional visibility now spans
+  **more than one field** and **numeric thresholds**, staying inside the
+  eval-free "declared literal predicate" contract. `all:` / `any:` fold a list of
+  per-field terms (`{ field:, equals:/not:/in:/gte:/… }`) with one fixed
+  connective — AND vs OR over the same literal vocabulary, no expression surface;
+  one flat binding replaces wrapper-div nesting and is the only way to express OR.
+  `gte:`/`gt:`/`lte:`/`lt:` compare `Number(value)` against a literal number baked
+  into the binding (the RHS must be a real `Numeric` — a typo fails at render); a
+  non-numeric field value is `NaN` → hidden, the safe reveal-on-threshold default.
+  Numeric predicates work standalone, as a compound term, and inside a
+  `reactive_show_targets` map. Malformed terms fold **false** (fail-closed:
+  default-deny). The single-field `reactive_show(:field, equals:)` form is
+  unchanged; the additions are backwards compatible.
+
 - **Installable Claude debugging skill + `rails g phlex:reactive:claude` (#168).**
   The gem ships a `phlex-reactive-debugging` skill (the doctor → inventory → find
   → browser `report()` → MCP workflow + a failure table) under `lib/`, and the

data/README.md

@@ -387,8 +387,8 @@ Use in controllers: `render turbo_stream: Counter.replace(counter)`.
 | `reactive_input(:param, **attrs)` / `reactive_select(:param, **attrs)` | Render a control already bound to an action param (no magic `name:`). |
 | `reactive_field(:param, **attrs)` | The attribute hash behind the above — spread onto any control. |
 | `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(:field, equals:/not:/in:)` | **Value-conditional visibility** (the `x-show`/`data-show` case): spread onto the element to show/hide — it toggles `hidden` from the named field's **current value**, client-only, zero round trip. One literal predicate: `equals:`, `not:`, or `in: [...]`; `equals: true` reads a checkbox's checked state. See [Value-conditional visibility](#value-conditional-visibility-reactive_show). |
-| `reactive_show_targets(:field, "#id" => { equals: … })` | **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 (`reactive_show_targets(mode: { … }, kind: { … })`). Id selectors only (raise at render + client warn-skip); same literal predicates; toggles `hidden` only. See [Value-conditional visibility](#value-conditional-visibility-reactive_show). |
+| `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_filter(input:, option:, group: nil, empty: nil)` | **Client-side option filtering** for a preloaded combobox: spread onto the root — typing in the named input shows/hides the options by their `data-reactive-filter-text` haystack, **zero round trips**. 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_compute :name, inputs: { title: :string, qty: :number }, outputs:` | **Typed** inputs: a `:string` reaches the JS reducer raw, a `:number` is coerced through `Number`. The array form (`inputs: %i[a b]`) stays all-numeric. |
@@ -892,52 +892,58 @@ free as an ordinary action-param name (`on(:switch, key: "pgbus")` still passes
 
 `on_client` covers the *unconditional* client-only interactions; the last gap
 was **show/hide from a form field's current value** — the Alpine `x-show` /
-Datastar `data-show` / Livewire `wire:show` case ("reveal the details panel
-*while* this select isn't `none`"). That used to force a hand-written
-`change`-listener Stimulus controller back into an otherwise declarative form.
-`reactive_show` closes it: spread it onto the element to show/hide, name the
-controlling field, declare **one literal predicate** — the generic controller
-toggles the `hidden` attribute from the field's current value on every
-`input`/`change`. Client-only, **no token, no POST, ever**:
+Datastar `data-show` / Livewire `wire:show` case. `reactive_show` closes it with
+ONE Ruby-native conditions language: spread it onto the element to show/hide and
+declare an `if:` / `if_any:` / `unless:` condition with `where`-style values —
+the generic controller toggles the `hidden` attribute from the fields' current
+values on every `input`/`change`. Client-only, **no token, no POST, ever**:
 
 ```ruby
 def view_template
   div(**reactive_root) do
     select(name: "mode") { shipping_options }
-    div(**reactive_show(:mode, not: "off", hidden: @order.mode == "off")) { shipping_details }
+    div(**reactive_show(unless: { mode: "off" })) { shipping_details }
 
     input(type: "checkbox", name: "gift")
-    div(**reactive_show(:gift, equals: true, hidden: true)) { gift_message_field }
+    div(**reactive_show(if: { gift: true })) { gift_message_field }
 
     select(name: "size") { size_options }
-    div(**reactive_show(:size, in: %w[l xl], hidden: true)) { surcharge_note }
+    div(**reactive_show(if: { size: %w[l xl] })) { surcharge_note }        # membership
+
+    input(type: "number", name: "quantity")
+    div(**reactive_show(if: { quantity: 10.. })) { bulk_note }             # threshold
   end
 end
 ```
 
-- **One predicate per binding** — `equals:`, `not:`, or `in:` (a list); zero or
-  two raise at render (a dead binding must not silently no-op). Values are
-  **stringified literals** matched against the field's value — never an
-  expression, so there is no eval surface.
-- **Field reads follow the collection rules**: a checkbox compares its
-  *checked* state as `"true"`/`"false"` (so `equals: true` is the checkbox
-  form — its `.value` is the constant `"on"`, and it wins over the hidden
-  input Rails pairs with it); a radio group reads the **checked** radio's
-  value (`""` when none is); everything else reads `.value`. Ownership is the
-  usual rule — a nested reactive component's fields and bindings belong to the
-  nested component.
-- **Initial state**: the client seeds visibility at connect and reconciles
-  after a morph, but render the initial `hidden:` yourself (from the same
-  server state that renders the field, as above) so the first paint doesn't
-  flash.
-- **Extra attrs ride through the helper** (`reactive_show(:mode, not: "off",
-  class: "panel", data: { testid: "details" })`) and deep-merge — a bare
-  `data:` spread *beside* it would clobber the binding, same as `on(...)`.
+- **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:`.
+  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:
+  true }, { shareholder: true, role: "individual" }]`), so
+  `director || (shareholder && individual)` is **one flat binding**, no nested
+  wrapper divs, no hand-applied distributive law.
+- **First paint is computed for you** — declare `reactive_values` once
+  (`def reactive_values = { mode: @order.mode, gift: @order.gift? }`) and every
+  binding whose fields are all provided renders the correct initial `hidden:`
+  server-side. No per-section mirror method, no flash. An explicit `hidden:`
+  always wins; a per-call `values:` override merges over `reactive_values`.
+- **`reactive_scope :form`** lets bindings and `reactive_values` use bare
+  symbols while the client resolves `[name="form[field]"]`.
+- **`disable: true`** disables a hidden section's own controls so a
+  switched-away value never submits (the stale-value fix).
+- **Field reads follow the collection rules**: a checkbox compares its *checked*
+  state; a radio group reads the **checked** radio's value; everything else
+  reads `.value`. Ownership is the usual rule — a nested reactive component's
+  fields and bindings belong to the nested component.
 - **Composes with computes**: a `reactive_compute` output write dispatches a
   real `input` event, so a *derived* value can drive visibility too.
-- Presentational only, strictly weaker than the js ops: it reads an owned
-  field and toggles `hidden` on an owned element — no `innerHTML`, no
-  attribute freedom. Cross-root writes take the **declared** escape below.
+- Presentational only, strictly weaker than the js ops: it reads owned fields
+  and toggles `hidden` (+ optionally `disabled`) on owned elements — no
+  `innerHTML`, no attribute freedom. Cross-root writes take the escape below.
 
 **Cross-root targets (`reactive_show_targets`).** A plain `reactive_show` is
 root-scoped by design — but "a mode selector reveals dependent sections
@@ -946,13 +952,13 @@ sidebar note) routinely puts the dependents **outside** the control's root.
 `reactive_show_targets` is the declared escape, the visibility parallel of the
 [cross-root text mirror](#cross-root-mirrors-mirror--painting-a-recap-outside-the-root):
 the component that **owns** the field declares which outside ids it governs,
-spread on the **root**:
+spread on the **root**, using the same `where`-style values:
 
 ```ruby
 div(**mix(reactive_root, reactive_show_targets(:mode,
-  "#advanced-tab"   => { equals: "advanced" },
-  "#advanced-panel" => { equals: "advanced" },
-  "#basic-note"     => { not: "advanced" }))) do
+  "#advanced-tab"   => "advanced",            # equals
+  "#advanced-panel" => "advanced",
+  "#premium-note"   => %w[gold platinum]))) do  # membership
   select(name: "mode") { mode_options }
   # …
 end
@@ -961,11 +967,10 @@ end
 Same posture as `mirror:`: **opt-in and declared, never implicit** — a plain
 `reactive_show` stays root-isolated; targets are **single id selectors only**
 (a class/compound selector raises at render AND is warn-and-skipped by the
-client — two-sided default-deny); the predicate is the same literal-only
-vocabulary; and the toggle is `hidden` only. The field read stays **owned** —
-you can only drive outside visibility from a field the declaring root owns. A
-target id not on the page is silently skipped, so a target inside an
-unrendered tab pane is fine.
+client — two-sided default-deny); values use the same vocabulary; and the
+toggle is `hidden` only. The field read stays **owned** — you can only drive
+outside visibility from a field the declaring root owns. A target id not on the
+page is silently skipped, so a target inside an unrendered tab pane is fine.
 
 **One call per root.** Phlex `mix` space-joins duplicate string `data:`
 values, so a *second* `reactive_show_targets` call on the same root would
@@ -973,8 +978,8 @@ concatenate two JSON payloads into an unparseable attribute (the client warns
 and ignores it). Several fields go in **one call** via the hash form:
 
 ```ruby
-reactive_show_targets(mode: { "#advanced-tab" => { equals: "advanced" } },
-                      kind: { "#premium-note" => { not: "basic" } })
+reactive_show_targets(mode: { "#advanced-tab" => "advanced" },
+                      kind: { "#premium-note" => %w[gold platinum] })
 ```
 
 ### Client-side computes (`reactive_compute` + `reactive_text`)

data/app/controllers/phlex/reactive/actions_controller.rb

@@ -328,8 +328,21 @@ module Phlex
         # ground-truth flag (rx_carries_token?), a raw string from a substring
         # scan. Deliberately NOT rx_refreshes_token_for? (target-scoped): scoping
         # this guard would regress update/morph of self on an aliased id.
+        #
+        # A self-render reply (Response.replace/update/morph — subject_component
+        # set) whose streams somehow carry no token gets the full self-replace
+        # (defensive, unchanged). A companion-only reply.with (NO subject, NO
+        # token_component) that doesn't re-render the root gets a token-ONLY
+        # refresh instead — issue #180 automatic token refresh: reply.with and
+        # reply.streams converge, the author never picks a verb to keep the token
+        # fresh, and a live input is never clobbered by a forced replace.
         elsif result.render_self? && streams.none? { stream_carries_token?(it) }
-          streams = [component.to_stream_replace, *streams]
+          streams =
+            if result.subject_component
+              [component.to_stream_replace, *streams]
+            else
+              [*streams, component.to_stream_token]
+            end
         end
 
         append_deferred_streams(streams, result)

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

@@ -766,10 +766,59 @@ function showBindingMatches(el, value) {
     console.warn(`[phlex-reactive] malformed reactive_show in: list ${JSON.stringify(inRaw)} — skipped`)
     return null
   }
+  // Numeric threshold predicates (issue #176 part B): gte/gt/lte/lt read the
+  // literal off its own flat attr and compare Number(value) against it. Any
+  // present numeric attr decides the binding — a non-numeric field value (NaN)
+  // is false (hidden), and a non-numeric LITERAL warn-skips (null).
+  for (const key of SHOW_NUMERIC_KEYS) {
+    const raw = el.getAttribute(`data-reactive-show-${key}`)
+    if (raw !== null) return numericPredicateMatches(key, raw, value)
+  }
   console.warn("[phlex-reactive] a reactive_show binding declares no predicate — skipped")
   return null
 }
 
+// The numeric threshold keys (issue #176 part B) — the client half of the Ruby
+// SHOW_NUMERIC_KEYS. Order-independent; the evaluator reads the one that's
+// present. Each coerces BOTH sides to Number and compares.
+const SHOW_NUMERIC_KEYS = ["gte", "gt", "lte", "lt"]
+
+// Evaluate one numeric threshold predicate against a field value. Returns
+// true/false for a decidable comparison, or null when the LITERAL itself is
+// non-numeric (a malformed binding — warn-skip, default-deny). A non-numeric
+// FIELD value (empty/blank/garbage) is treated as NaN → false: the
+// reveal-on-threshold notice stays hidden, the safe default. Shared by the
+// owned-binding evaluator (raw string literal off an attr) and the
+// cross-root/compound evaluator (a literal that arrived as a JSON number or
+// string).
+function numericPredicateMatches(key, literal, value) {
+  const rhs = Number(literal)
+  if (Number.isNaN(rhs)) {
+    console.warn(`[phlex-reactive] reactive_show ${key}: needs a numeric literal, got ${JSON.stringify(literal)} — skipped`)
+    return null
+  }
+  // A blank/whitespace field value must fail closed. Number("") and
+  // Number("   ") are 0 (NOT NaN), so a bare Number()+isNaN check would wrongly
+  // reveal a `lte:`/`lt:`/`gte: 0` binding on an EMPTY field. Force the
+  // empty/blank case to NaN so the "blank → hidden" contract holds for every
+  // operator, not just the ones where 0 happens to fail the comparison.
+  const trimmed = value == null ? "" : String(value).trim()
+  const n = trimmed === "" ? NaN : Number(trimmed)
+  if (Number.isNaN(n)) return false
+  switch (key) {
+    case "gte":
+      return n >= rhs
+    case "gt":
+      return n > rhs
+    case "lte":
+      return n <= rhs
+    case "lt":
+      return n < rhs
+    default:
+      return null
+  }
+}
+
 // Evaluate an ALREADY-PARSED show predicate object (issue #164) — the
 // reactive_show_targets map embeds { equals/not/in } directly in its JSON, so
 // unlike showBindingMatches there are no attrs to read or re-parse. The same
@@ -781,9 +830,89 @@ function showPredicateMatches(pred, value) {
   if (typeof pred.equals === "string") return value === pred.equals
   if (typeof pred.not === "string") return value !== pred.not
   if (Array.isArray(pred.in)) return pred.in.includes(value)
+  // Numeric threshold predicates (issue #176 part B): the literal arrives as a
+  // JSON number (or a numeric string) embedded in the predicate object — one
+  // shared numericPredicateMatches with the owned-binding evaluator.
+  for (const key of SHOW_NUMERIC_KEYS) {
+    if (key in pred) return numericPredicateMatches(key, pred[key], value)
+  }
   return null
 }
 
+// The selector matching every OWNED-element show binding: single-field
+// (data-reactive-show-field, issue #161) OR compound all:/any:
+// (data-reactive-show, issue #176). Both the connect() gate and the sync walk
+// use it so a compound-only root still enables the sync.
+const SHOW_BINDING_SELECTOR = "[data-reactive-show-field], [data-reactive-show]"
+
+// Parse a compound show binding's JSON payload (issue #176 part A). Malformed
+// JSON degrades to null WITH a warn — a bad binding must never throw or blank
+// the page (client-side default-deny), but a collision (two bindings' JSON
+// mix-joined) is worth surfacing.
+function parseShowCompound(raw) {
+  try {
+    const parsed = JSON.parse(raw)
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) return parsed
+  } catch {
+    // fall through to the warn
+  }
+  console.warn(`[phlex-reactive] malformed compound reactive_show payload ${JSON.stringify(raw)} — skipped`)
+  return null
+}
+
+// Evaluate one DNF TERM against a resolved field value (issue #180). A missing
+// field (null) or a malformed/unknown predicate folds to FALSE — fail-closed
+// (default-deny): a broken AND term can't pass, a broken OR term can't reveal.
+function dnfTermMatches(term, fieldValue) {
+  if (!term || typeof term !== "object" || typeof term.field !== "string") return false
+  // An absent owned field reads as "" — identical to the server evaluator
+  // (ShowConditions.match? treats a missing field as blank). This keeps the
+  // Ruby first-paint and the client live-toggle in exact agreement (the shared
+  // fixture proves it). A malformed predicate still folds to false.
+  const value = fieldValue(term.field) ?? ""
+  return showPredicateMatches(term, value) === true
+}
+
+// Evaluate a DNF show payload (issue #180): { any: [group, …] } where each
+// GROUP is an array of terms (terms AND within a group, groups OR). Returns
+// true/false for a decidable payload, or null for a malformed one (no groups)
+// so the caller warn-skips and leaves visibility alone. This is the ONE shape
+// the 0.10 wire emits; showPayloadMatches routes the legacy shapes here or to
+// the compatibility arm below.
+function anyOfAllsMatches(groups, fieldValue) {
+  if (!Array.isArray(groups) || groups.length === 0) return null
+  // groups OR; within a group, terms AND (an empty group can't decide → false).
+  return groups.some((group) => Array.isArray(group) && group.length > 0 &&
+    group.every((term) => dnfTermMatches(term, fieldValue)))
+}
+
+// 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
+// shape { all: [term,…] } / { any: [term,…] } where the values are flat TERM
+// OBJECTS, not arrays. The nesting distinguishes them: DNF's any[0] is an Array.
+// DELETE the legacy arm in 0.11.
+function showPayloadMatches(payload, fieldValue) {
+  if (!payload || typeof payload !== "object") return null
+  const any = payload.any
+  if (Array.isArray(any) && (any.length === 0 || Array.isArray(any[0]))) {
+    return anyOfAllsMatches(any, fieldValue)
+  }
+  return legacyCompoundShowMatches(payload, fieldValue)
+}
+
+// LEGACY (0.9.5, deploy-overlap only — DELETE in 0.11): the flat all:/any:
+// compound fold, where terms are objects (not groups). Preserved so a morph of
+// stale pre-0.10 HTML doesn't go dead.
+function legacyCompoundShowMatches(payload, fieldValue) {
+  const connective = Array.isArray(payload.all) ? "all" : Array.isArray(payload.any) ? "any" : null
+  if (!connective) return null
+  const terms = payload[connective]
+  if (terms.length === 0) return null
+  const results = terms.map((term) => dnfTermMatches(term, fieldValue))
+  return connective === "all" ? results.every(Boolean) : results.some(Boolean)
+}
+
 // A cross-root show target must be a single ID selector (issue #164) — the
 // SAME shape the #159 mirror enforces (one shared regex), with its own warn so
 // a refused show target is distinguishable in the console. The client half of
@@ -2222,7 +2351,10 @@ export default class extends Controller {
   // getAttribute, cheaper than the binding walk.
   #showSyncEnabled() {
     if (this.element.getAttribute?.("data-reactive-show-targets")) return true
-    const nodes = this.element.querySelectorAll?.("[data-reactive-show-field]") ?? []
+    // Single-field bindings carry -field; compound all:/any: bindings (issue
+    // #176) carry data-reactive-show and have NO single controlling field, so
+    // both selectors gate the sync.
+    const nodes = this.element.querySelectorAll?.(SHOW_BINDING_SELECTOR) ?? []
     for (const el of nodes) if (this.#ownsField(el)) return true
     return false
   }
@@ -2239,22 +2371,57 @@ export default class extends Controller {
     if (typeof this.element?.querySelectorAll !== "function") return
 
     const owns = this.#ownershipFilter()
+    const scope = this.element.getAttribute?.("data-reactive-scope") || null
     const values = new Map()
-    for (const el of this.element.querySelectorAll("[data-reactive-show-field]")) {
+    // A memoized resolver shared by every binding in this pass — a field driving
+    // several bindings (and several DNF terms) reads exactly once. Scope-aware:
+    // a bare field `director` resolves as `[name="scope[director]"]` (issue #180).
+    const fieldValue = (name) => {
+      if (!values.has(name)) values.set(name, this.#showFieldValue(name, owns, scope))
+      return values.get(name)
+    }
+    for (const el of this.element.querySelectorAll(SHOW_BINDING_SELECTOR)) {
       if (!owns(el)) continue // a nested root's binding is its own controller's job
+
+      // The 0.10 DNF payload (issue #180): data-reactive-show carries
+      // { any: [ [term,…], … ] }. The legacy flat-attr and 0.9.5-compound read
+      // arms live in showPayloadMatches/showBindingMatches for deploy overlap.
+      const payloadRaw = el.getAttribute("data-reactive-show")
+      if (payloadRaw !== null) {
+        const match = showPayloadMatches(parseShowCompound(payloadRaw), fieldValue)
+        if (match !== null) this.#applyShowVisibility(el, match, owns, scope)
+        continue
+      }
+
+      // LEGACY flat-attr binding (pre-0.10, deploy overlap — removed in 0.11).
       const name = el.getAttribute("data-reactive-show-field")
       if (!name) continue
-      if (!values.has(name)) values.set(name, this.#showFieldValue(name, owns))
-      const value = values.get(name)
+      const value = fieldValue(name)
       if (value === null) continue // no owned field with that name — leave it be
       const match = showBindingMatches(el, value)
       if (match === null) continue // malformed predicate — warned + skipped
-      el.hidden = !match
+      this.#applyShowVisibility(el, match, owns, scope)
     }
 
     // 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)
+    this.#syncShowTargets(owns, values, scope)
+  }
+
+  // Toggle `hidden` (and, when the binding declares data-reactive-show-disable,
+  // the `disabled` of every owned named control inside it) from a match result
+  // (issue #180). Disabling a hidden section's controls stops them submitting —
+  // the stale-value fix. A visible section re-enables them. Controls a nested
+  // reactive root owns are left alone (#15 ownership).
+  #applyShowVisibility(el, match, owns, scope) {
+    el.hidden = !match
+    if (el.getAttribute("data-reactive-show-disable") !== "true") return
+    if (typeof el.querySelectorAll !== "function") return
+    for (const control of el.querySelectorAll("input[name], select[name], textarea[name]")) {
+      if (owns(control)) control.disabled = !match
+    }
+    // The element itself may be a named control (a bare field with a binding).
+    if (el.name && owns(el)) el.disabled = !match
   }
 
   // Apply the declared cross-root show targets (issue #164) — the visibility
@@ -2267,19 +2434,35 @@ 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) {
+  #syncShowTargets(owns, values, scope) {
     const map = this.#parseShowTargets()
     for (const [name, targets] of Object.entries(map)) {
       if (!targets || typeof targets !== "object" || Array.isArray(targets)) continue
-      if (!values.has(name)) values.set(name, this.#showFieldValue(name, owns))
+      if (!values.has(name)) values.set(name, this.#showFieldValue(name, owns, scope))
       const value = values.get(name)
       if (value === null) continue // no owned field with that name — leave them be
-      for (const [selector, pred] of Object.entries(targets)) {
+      // 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).
+      const resolve = () => value
+      for (const [selector, group] of Object.entries(targets)) {
         if (!guardShowTargetSelector(selector)) continue
-        const match = showPredicateMatches(pred, value)
-        if (match === null) {
-          console.warn(`[phlex-reactive] malformed reactive_show_targets predicate for ${selector} — skipped`)
-          continue
+        // 0.10 wire: the value is a DNF GROUP (an array of terms, ANDed).
+        // LEGACY (0.9.5, deploy overlap — DELETE in 0.11): a flat predicate
+        // OBJECT ({ equals/not/in/gte… }) routed through showPredicateMatches.
+        let match
+        if (Array.isArray(group)) {
+          if (group.length === 0) {
+            console.warn(`[phlex-reactive] malformed reactive_show_targets group for ${selector} — skipped`)
+            continue
+          }
+          match = group.every((term) => dnfTermMatches(term, resolve))
+        } else {
+          const legacy = showPredicateMatches(group, value)
+          if (legacy === null) {
+            console.warn(`[phlex-reactive] malformed reactive_show_targets predicate for ${selector} — skipped`)
+            continue
+          }
+          match = legacy
         }
         for (const node of document.querySelectorAll(selector)) node.hidden = !match
       }
@@ -2317,10 +2500,14 @@ export default class extends Controller {
   // Rails pairs with it); a radio group reports the CHECKED radio's value (""
   // when none is); anything else reports .value first-wins. Returns null when
   // no owned field carries the name — the caller then leaves visibility alone.
-  #showFieldValue(name, owns) {
+  #showFieldValue(name, owns, scope) {
+    // Scope (issue #180): a bare field `director` under `data-reactive-scope=
+    // "form"` resolves as `[name="form[director]"]`. A name already carrying a
+    // bracket (a raw wire name the author passed) is used verbatim.
+    const domName = scope && !name.includes("[") ? `${scope}[${name}]` : name
     let sawRadio = false
     let first = null
-    for (const el of this.element.querySelectorAll(`[name="${name}"]`)) {
+    for (const el of this.element.querySelectorAll(`[name="${domName}"]`)) {
       if (!owns(el)) continue
       if (el.type === "checkbox") return el.checked ? "true" : "false"
       if (el.type === "radio") {