Example: live payment split (sum-to-total rebalancer)

# app/components/payment_split.rb
class PaymentSplit < ApplicationComponent
  include Phlex::Reactive::Component

  FIELDS = %i[allowance cash leasing].freeze

  reactive_state :allowance, :cash, :leasing, :total
  action :rebalance, params: {
    changed: :string,
    split: { allowance: :integer, cash: :integer, leasing: :integer, total: :integer }
  }

  def id = "payment-split"

  # `split` is the bracket-expanded, coerced inner hash; `total` rides in
  # it even though its field is disabled. `apply`/`reconcile` are YOUR
  # own methods (assign the fields, then spill the difference into the
  # peers) — the gem only hands you reply.morph.
  def rebalance(changed:, split:)
    apply(split)
    reconcile(changed.to_sym)
    reply.morph                    # no persist, no broadcast
  end

  def view_template
    div(**reactive_root) do
      FIELDS.each do |field|
        # change-triggered; the field name is bracketed so it nests under split:
        input(**mix(on(:rebalance, event: "change", changed: field.to_s),
                    type: "number", name: "split[#{field}]", value: send(field), min: 0))
      end
      # disabled, but still collected + read by the action (#66)
      input(type: "number", name: "split[total]", value: @total, disabled: true)
    end
  end
end

# ✅ nested — matches the bracketed field names
action :rebalance, params: { split: { allowance: :integer, cash: :integer,
                                       leasing: :integer, total: :integer } }

# ❌ flat — matches NOTHING; the action silently gets its keyword defaults
action :rebalance, params: { allowance: :integer, cash: :integer }

# Recompute while typing, but coalesce the POSTs: one request 300ms
# after the last keystroke, not one per character.
input(**mix(on(:rebalance, event: "input", debounce: 300, changed: field.to_s),
            type: "number", name: "split[#{field}]", value: send(field), min: 0))

# Scoped spinner: only lit while :rebalance is in flight.
span(**busy_on(:rebalance), class: "loading loading-spinner loading-xs hidden")

# Or a declarative per-trigger loading hint on the field itself.
input(**mix(on(:rebalance, event: "input", debounce: 300, loading: { class: "opacity-50" }),
            type: "number", name: "split[#{field}]", value: send(field)))

# app/components/payment_split.rb — the client-side compute variant
class PaymentSplit < ApplicationComponent
  include Phlex::Reactive::Component

  FIELDS = %i[allowance cash leasing].freeze

  reactive_state :allowance, :cash, :leasing, :total
  action :rebalance, params: {
    split: { allowance: :integer, cash: :integer, leasing: :integer, total: :integer }
  }

  # Client-side reducer (registered in JS under this name). It reads the
  # named inputs and WRITES the outputs with no round trip — the debounced
  # POST reconciles afterwards from reply.morph.
  reactive_compute :payment_split,
    inputs:  %i[allowance cash leasing total],       # fields the JS reducer reads
    outputs: %i[allowance cash leasing remaining]    # 3 fields + one text node

  def id = "payment-split"

  def rebalance(split:)
    apply(split)                     # your own: assign the live fields
    reconcile(:allowance)            # your own: pure rebalance math
    reply.morph                      # server reconciles the client paint
  end

  def view_template
    # Spread reactive_compute_attrs ALONGSIDE reactive_root so the generic
    # controller finds the reducer and the named fields inside this root.
    div(**mix(reactive_root, reactive_compute_attrs(:payment_split))) do
      FIELDS.each do |field|
        # `input`-triggered + debounced: recompute on the client every
        # keystroke, POST 300ms after the last one.
        input(**mix(on(:rebalance, event: "input", debounce: 300),
                    type: "number", name: "split[#{field}]", value: send(field), min: 0))
      end
      # A live text output the reducer writes — no name, never POSTed.
      # Seeded with the same value the reducer would produce.
      span { plain "Remaining: " }
      reactive_text(:remaining, "0")
    end
  end
end

import { setComputeReducer } from "phlex/reactive/compute"

// The JS twin of the Ruby rebalance — keep the two in lockstep.
// The edited `allowance` keeps its value; cash absorbs the remainder;
// an over-total edit caps allowance and zeros the peers. `remaining`
// is a text-node output (no matching field) written straight to the DOM.
setComputeReducer("payment_split", ({ allowance, total }) => {
  if (allowance >= total) return { allowance: total, cash: 0, leasing: 0, remaining: 0 }
  const cash = total - allowance
  return { allowance, cash, leasing: 0, remaining: total - allowance - cash }
})

reactive_compute :payment_split,
  inputs:  %i[allowance cash leasing total],
  outputs: %i[allowance cash leasing],
  mirror:  { cash: "#summary-cash", total: "#summary-total" }

reactive_record :invoice   # identity + auth ONLY
action :rebalance, params: { split: { allowance: :integer, cash: :integer,
                                       leasing: :integer, total: :integer } }

def rebalance(split:)
  authorize! @invoice, :update?          # identity is not permission
  apply(split)                           # your own: assign the live fields
  reconcile(:allowance)                  # your own: pure rebalance math
  reply.morph                            # re-render in place — no persist, no broadcast
end