YouBothAgent▾
You — Business rules and flows you own. Read these yourself.
Both — Know the idea; your agent follows the details.
Agent — Conventions and references your agent follows. Look up as needed.
Introduction▾
Tutorials▾
System Architecture▾
Module Convention▾
Scalar Convention▾
model.Zone.tsx
Zone components are 'Business Components' that bridge the gap between Pages and UI Units. They handle data fetching, state management, and business logic for a specific section of the UI.
🏗️Page Composition
A Page should ideally be composed of just Layout and Zone components. Detailed UI rendering is delegated to Units or Views.
File Convention
Zone files are located in the library directory of their respective Model. The filename must follow the PascalCase convention.
lib/[model]/[Model].Zone.tsxStandard Structure
Zone components typically use
Load.View or Load.Units to handle asynchronous data loading. They interact with the Store for global state and Service for actions.Props
fieldDescription
className?: string
Allows parent components to style the zone.
init?: ClientInit<Model, M>
Initial data for List/Units loading.
view?: ClientView<Model, M>
Initial data for View/Single loading.
Example Code: List Zone
Product.Zone.tsx (List)
Example Code: View Zone
Product.Zone.tsx (View)
Zone Best Practices
1️⃣Keep Pages Thin
Move data loading and logic from Page files to Zone files. Pages should primarily focus on Layout composition and routing parameters.
2️⃣Handle Loading & Empty States
Use
Load.Units or Load.View to gracefully handle loading and empty states within the Zone, providing a better user experience.3️⃣Encapsulate Business Logic
Place interaction handlers (e.g., button clicks triggering Service actions) inside the Zone, keeping Unit/View components purely presentational.