model.Template.tsx

A Template file contains client UI pieces for a module. Most Templates render model forms, but they can also export smaller interaction fragments such as submit buttons, onboarding steps, or preview blocks.

Templates should bind UI to store state and actions. Business rules should stay in constants, documents, services, signals, or store actions.

File Convention

Template files live beside the module they render. They usually need client hooks and event handlers, so they start with the use client directive.

Path

lib/[model]/[Model].Template.tsx

Directive

"use client"

Exports

General, Phone, SubmitPhone, Preview

Standard Form Template

A standard form Template reads form state from st.use, gets labels from usePage, and writes changes through generated st.do setters.

Ticket.Template.tsx

Field Patterns

Field components are predefined elements for fast development and standardized form UI. Pick the smallest Field component that matches the input shape, then connect value and onChange to store state.

You can also build custom UI with plain input, button, or any app-specific component when Field does not match the interaction you need.

Field.Parent

Field.ToggleSelect

Field.Img

Field.Yoopta

Split Components

A Template file can export several small components. Split large forms by business step or UI responsibility instead of forcing everything into General.

User.Template.tsx

Submit component

Template Usage Patterns

Wrappers such as Load.Edit, Model.Edit, and Model.NewWrapper prepare store form state and submit behavior. Templates stay focused on rendering fields and small interactions.

Server Page With Load.Edit

Use Load.Edit in server-rendered pages when the page already knows the edit object. The server page can fetch data or build a partial form, then pass it to Load.Edit. The child Template is still a client component.

Internally, Load.Edit delegates to Model.EditModal. It hydrates the model and form state before the Template fields read st.use.<model>Form().

field	Description	Example
<model>	Stores the hydrated full model when editing an existing record.
<model>Loading	Marks the model data as ready after the edit object is applied.
<model>Form	Stores the editable form copy made from the full model. Template fields read and update this state.
<model>FormLoading	Marks the form as ready so the edit form can render and submit.
<model>Modal	Stores the current form mode. Load.Edit normally sets it to edit unless a custom modal key is provided.
<model>ViewAt	Stores the timestamp from the edit object for consistency with view/edit state.

<model>

Stores the hydrated full model when editing an existing record.

<model>Loading

Marks the model data as ready after the edit object is applied.

<model>Form

Stores the editable form copy made from the full model. Template fields read and update this state.

<model>FormLoading

Marks the form as ready so the edit form can render and submit.

<model>Modal

Stores the current form mode. Load.Edit normally sets it to edit unless a custom modal key is provided.

<model>ViewAt

Stores the timestamp from the edit object for consistency with view/edit state.

new.tsx

edit.tsx

Modal Edit With Model.Edit

Use Model.Edit when a list, dropdown, or unit component needs an edit trigger. It renders the clickable edit control and the matching edit modal around the Template.

Ticket.Util.tsx

New Form Trigger With Model.NewWrapper

Use Model.NewWrapper when a button or empty-list CTA should open a new form. partial supplies default form values, and the wrapper calls the generated new<Model> action for the slice.

Release.Zone.tsx

Practical Rules

Use Layout.Template for form layouts that need consistent spacing.

Use dictionary keys for label and desc instead of hard-coded field text.

Bind Field onChange directly to generated st.do setters when possible.

Use plain input, button, or custom components when predefined Field components do not fit the UI.

Keep business decisions out of Templates. Move them to constants, stores, services, or signals.

Split large forms into named components such as General, Phone, SubmitPhone, or Preview.

Use Load.Edit for server pages with prepared edit data, Model.Edit for modal edit triggers, and Model.NewWrapper for new-form buttons.