EXAMPLE · Example 7.3

Composing forms with $use()

Two independent UI spaces stitched into one panel — without nesting, without coupling.

Two forms, declared independently, composed into a parent panel. Late binding means the shared persistence task doesn’t need to know who called it.

@ShippingForm:UI
>>> Form for collecting the user's shipping address.
>>> Bind inputs to %shippingData.
>>> When %onEnter, trigger $ui_reader(out=%shippingData).
>>> When %onSubmit, delegate to $validateShipping.
>>> If valid, delegate to $placeOrder(in=%shippingData).
>
$ui_reader(out=%shippingData)
>>> Loads saved shipping data on panel entry.
>
@PaymentForm:UI
>>> Form for collecting credit-card and billing information.
>>> Bind inputs to %paymentData.
>>> When %onEnter, trigger $ui_reader(out=%paymentData).
>>> When %onSubmit, delegate to $validatePayment.
>>> If valid, delegate to $placeOrder(in=%paymentData).
>
$ui_reader(out=%paymentData)
>>> Loads saved payment data on panel entry.
>
@CheckoutPanel:UI
>>> Checkout panel that composes the shipping and payment forms.
>>> $use(@ShippingForm)
>>> $use(@PaymentForm)
>>> On %orderSuccess, display confirmation via $ui_writer.
>>> On %orderFailed, display error via $ui_writer.
>
$placeOrder(in=%data)
>>> Submits either %shippingData or %paymentData to backend.
>>> Emits %orderSuccess or %orderFailed.
>
$ui_writer(in=%orderSuccess, %orderFailed)
>>> Renders confirmation or failure feedback to the user.

What this shows

Independence. @ShippingForm and @PaymentForm declare themselves without referencing each other or @CheckoutPanel. They can be reviewed, tested, and reused on their own.

Consistent event-driven binding. Both forms use the same vocabulary: %onEnter to load, %onSubmit to validate, then delegate to a shared $placeOrder task on success.

Composition with $use(). @CheckoutPanel includes both subspaces by name. There is no inheritance, no slot-passing — just a directive that says “these two are part of me.”

Late binding via %data. $placeOrder accepts a generic %data parameter. At runtime it receives either %shippingData or %paymentData depending on which form’s submission triggered it. The compiler verifies the data shapes match at the point of call.

Single confirmation surface. A common $ui_writer listens to both %orderSuccess and %orderFailed, regardless of which form triggered the order. Adding a third form means declaring it and wiring its %onSubmit to $placeOrder — no changes to @CheckoutPanel are required.