model.Zone.tsx

A Zone file contains client section components for pages. Zones compose server-fetched init/view data with Load wrappers, Unit/View display components, Util actions, and small section-level UI state.

Pages should usually pass route params and server data into Zones. Zones handle section composition, while Unit/View render display, Template renders forms, Util handles small actions, and Store owns state/actions.

File Convention And Props

Zone files usually use client hooks and Load wrappers, so they start with the use client directive. Their props commonly receive server-prepared ClientInit or ClientView values.

Path

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

Directive

"use client"

List props

className, init, slice, context ids

View props

className, view, self, context data

List Zone With Load.Units

Use Load.Units when a Zone receives ClientInit list data from a server page. It hydrates initial list state, handles loading and empty states, and delegates each item to Unit components.

DbBackup.Zone.tsx

renderItem

Render one item, usually by delegating to Unit.Card or Unit.Abstract.

renderList

Render the whole list when the layout needs grouping, tabs, boards, or custom ordering.

renderEmpty

Render empty states, often with Model.NewWrapper or a link-style call to action.

View Zone With Load.View

Use Load.View when a Zone receives ClientView detail data. Load.View hydrates the selected model into store state, then passes the full model to View components.

Ticket.Zone.tsx

Section Orchestration Zones

Some Zones compose more than a simple list. They may combine local UI state, store state, Unit components, Util controls, and Model wrappers for a complete page section.

Ticket.Zone.tsx

Dessert.Zone.tsx