robobyte-front-builder 1.0.26 → 1.0.28

package/training/25-layout.md

@@ -0,0 +1,116 @@
+# Component: layout
+
+A CSS Grid container that holds `layout-cell` children. The primary structural building block for page layouts.
+
+> ⚠️ CRITICAL RULES:
+> - NEVER use the `container` component — it is banned. Always use `layout` instead.
+> - Direct children of `layout` MUST be `layout-cell` nodes. Do not put other components directly inside layout.
+> - The root of every schema should be a `layout` with `cols: 1`.
+> - One component per layout-cell for cols ≥ 2 (unless the cell itself contains a nested layout).
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Optional identifier. |
+| `cols` | number | Number of grid columns. `1` = single column stack. `2` = two equal columns. `3`, `4`, etc. |
+| `gap` | number | Column gap in pixels between cells. Default: `0`. |
+| `rowGap` | number | Row gap in pixels between rows. Default: `0`. |
+| `cellMinHeight` | expression | Default minimum height for every cell, e.g. `"48px"`. Overridden per cell via layout-cell style. |
+| `cellPadding` | expression | Default padding applied to every cell, e.g. `"16px"`. Overridden per cell. |
+| `cellBackgroundColor` | expression | Default background color for all cells, e.g. `"#f5f5f5"`. |
+| `cellBorder` | expression | Default border for all cells, e.g. `"1px solid #e0e0e0"`. |
+| `cellBorderRadius` | expression | Default border-radius for all cells. |
+| `cellBoxShadow` | expression | Default box-shadow for all cells. |
+| `cellJustifyContent` | select | Default horizontal alignment of content within each cell: `flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly` |
+| `cellAlignItems` | select | Default vertical alignment within each cell: `flex-start` · `center` · `flex-end` · `stretch` · `baseline` |
+| `cellElementStyle` | expression | CSS object expression applied as overrides to all cells (highest priority among grid defaults). |
+| `cellElementCss` | expression | Additional CSS string applied to all cells. |
+
+---
+
+## Props — Style Tab
+
+No dedicated style tab for the layout container itself. Control the layout wrapper through its parent layout-cell style.
+
+---
+
+## Props — Actions Tab
+
+No actions.
+
+---
+
+## Cell Positioning (on layout-cell, not layout)
+
+When `cols > 1`, cells auto-flow into columns left-to-right. To manually position a cell:
+- Set `colStart` (1-indexed) and `colSpan` on the cell.
+- Set `rowStart` and `rowSpan` for cross-row spanning.
+- Leave these blank to use CSS auto-placement.
+
+---
+
+## Use Cases
+
+**When to use:**
+- Every page/screen should start with `layout cols:1` as root.
+- Two-column form layout: `cols: 2`.
+- Three-column dashboard cards: `cols: 3`.
+- Mixed widths: use `colSpan` on individual cells (e.g. a cell spanning all 3 columns).
+- Nested sections: put a `layout cols:2` inside a cell of a `layout cols:1`.
+
+**When NOT to use:**
+- Do not nest layouts more than 2–3 deep for performance.
+- For a single-column stack, `cols: 1` is correct (don't nest unnecessarily).
+
+---
+
+## Schema Examples
+
+### Single column (page root)
+```json
+{
+  "type": "layout",
+  "props": { "cols": 1, "gap": 0, "rowGap": 16 },
+  "children": [
+    { "type": "layout-cell", "props": {}, "children": [{ "type": "header", "props": { "text": "Page Title", "variant": "h4" } }] },
+    { "type": "layout-cell", "props": {}, "children": [{ "type": "input", "props": { "key": "name", "label": "Name" } }] }
+  ]
+}
+```
+
+### Two-column form
+```json
+{
+  "type": "layout",
+  "props": { "cols": 2, "gap": 16, "rowGap": 16 },
+  "children": [
+    { "type": "layout-cell", "props": {}, "children": [{ "type": "input", "props": { "key": "firstName", "label": "First Name" } }] },
+    { "type": "layout-cell", "props": {}, "children": [{ "type": "input", "props": { "key": "lastName", "label": "Last Name" } }] },
+    { "type": "layout-cell", "props": { "colSpan": 2 }, "children": [{ "type": "textarea", "props": { "key": "bio", "label": "Bio" } }] }
+  ]
+}
+```
+
+### Three-column KPI cards
+```json
+{
+  "type": "layout",
+  "props": {
+    "cols": 3,
+    "gap": 16,
+    "rowGap": 16,
+    "cellPadding": "20px",
+    "cellBackgroundColor": "#ffffff",
+    "cellBorderRadius": "8px",
+    "cellBoxShadow": "0 2px 8px rgba(0,0,0,0.08)"
+  },
+  "children": [
+    { "type": "layout-cell", "props": {}, "children": [{ "type": "kpi-metric", "props": { "valueKey": "data.revenue", "label": "Revenue", "format": "currency" } }] },
+    { "type": "layout-cell", "props": {}, "children": [{ "type": "kpi-metric", "props": { "valueKey": "data.orders", "label": "Orders", "format": "number" } }] },
+    { "type": "layout-cell", "props": {}, "children": [{ "type": "kpi-metric", "props": { "valueKey": "data.growth", "label": "Growth", "format": "percent" } }] }
+  ]
+}
+```

package/training/26-layout-cell.md

@@ -0,0 +1,143 @@
+# Component: layout-cell
+
+A single cell inside a `layout` grid container. Controls grid positioning and individual cell styling. Must be a direct child of `layout`.
+
+---
+
+## Props — Main Tab (Grid Positioning)
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Optional identifier. |
+| `colStart` | number | Which grid column this cell starts at (1-indexed). Leave blank for auto-placement. |
+| `rowStart` | number | Which grid row this cell starts at (1-indexed). Leave blank for auto-placement. |
+| `colSpan` | number | How many columns this cell spans. Default: `1`. Set to total cols to span full width. |
+| `rowSpan` | number | How many rows this cell spans. Default: `1`. |
+
+> NOTE: Only set `colStart`/`rowStart` when you need explicit positioning. For most layouts, leave them blank and let CSS auto-placement distribute cells.
+
+---
+
+## Props — Style Tab (Cell Visual Styling)
+
+These control the visual appearance of the individual cell. They override the parent layout's `cell*` defaults.
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `elementStyle` | expression | CSS object expression merged last (highest priority), e.g. `{ background: 'linear-gradient(...)' }`. |
+| `elementCss` | expression | CSS string expression merged last, e.g. `"background: linear-gradient(...)"`. |
+| `padding` | expression | Cell inner padding, e.g. `"16px"` or `"8px 16px"`. |
+| `paddingTop` | expression | Top padding only. |
+| `paddingBottom` | expression | Bottom padding only. |
+| `paddingLeft` | expression | Left padding only. |
+| `paddingRight` | expression | Right padding only. |
+| `width` | expression | Cell width override. Usually auto from grid. |
+| `minHeight` | expression | Minimum height, e.g. `"200px"`. |
+| `maxHeight` | expression | Maximum height; content scrolls if taller. |
+| `backgroundColor` | expression | Background color, e.g. `"#ffffff"`, `"primary.light"`. |
+| `backgroundImage` | expression | CSS background-image, e.g. `"url('/img/bg.jpg')"`. |
+| `backgroundSize` | expression | CSS background-size, e.g. `"cover"`, `"contain"`. |
+| `border` | expression | Full border shorthand, e.g. `"1px solid #e0e0e0"`. |
+| `borderTop` | expression | Top border only. |
+| `borderBottom` | expression | Bottom border only. |
+| `borderLeft` | expression | Left border only. |
+| `borderRight` | expression | Right border only. |
+| `borderRadius` | expression | Rounded corners, e.g. `"8px"`, `"12px 12px 0 0"`. |
+| `borderColor` | expression | Border color (used with border shorthand). |
+| `justifyContent` | select | Horizontal alignment of content: `flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly` |
+| `alignItems` | select | Vertical alignment of content: `flex-start` · `center` · `flex-end` · `stretch` · `baseline` |
+| `gap` | expression | Gap between children inside the cell, e.g. `"8px"`. |
+| `boxShadow` | expression | Box shadow, e.g. `"0 2px 8px rgba(0,0,0,0.1)"`. |
+| `opacity` | expression | Cell opacity, e.g. `"0.8"`. |
+| `overflow` | expression | CSS overflow: `"hidden"`, `"auto"`, `"visible"`. |
+
+---
+
+## Props — Actions Tab
+
+No actions.
+
+---
+
+## Use Cases
+
+**Always use layout-cell as the direct child of layout.**
+
+- A cell with only `justifyContent: center` and `alignItems: center` centers its content.
+- A card-style cell: `backgroundColor: "#fff"`, `borderRadius: "8px"`, `boxShadow: "0 2px 8px rgba(0,0,0,0.08)"`, `padding: "20px"`.
+- A highlighted header cell: `backgroundColor: "primary.main"`, `padding: "16px"`.
+- `colSpan: 2` in a `cols: 2` layout spans the full width.
+- `minHeight: "300px"` ensures a cell has a minimum size for visual balance.
+
+---
+
+## Schema Examples
+
+### Plain auto-placed cell
+```json
+{
+  "type": "layout-cell",
+  "props": {},
+  "style": { "padding": "16px" },
+  "children": [
+    { "type": "input", "props": { "key": "email", "label": "Email" } }
+  ]
+}
+```
+
+### Card-style cell
+```json
+{
+  "type": "layout-cell",
+  "props": {},
+  "style": {
+    "backgroundColor": "#ffffff",
+    "borderRadius": "8px",
+    "boxShadow": "0 2px 8px rgba(0,0,0,0.08)",
+    "padding": "20px"
+  },
+  "children": [
+    { "type": "kpi-metric", "props": { "valueKey": "data.revenue", "label": "Revenue", "format": "currency" } }
+  ]
+}
+```
+
+### Full-width cell (spans all 3 columns in a cols:3 layout)
+```json
+{
+  "type": "layout-cell",
+  "props": { "colSpan": 3 },
+  "style": { "padding": "0 0 16px 0" },
+  "children": [
+    { "type": "header", "props": { "text": "Section Title", "variant": "h5" } }
+  ]
+}
+```
+
+### Centered content cell
+```json
+{
+  "type": "layout-cell",
+  "props": {},
+  "style": {
+    "justifyContent": "center",
+    "alignItems": "center",
+    "minHeight": "200px",
+    "backgroundColor": "#f5f5f5",
+    "borderRadius": "8px"
+  },
+  "children": [
+    { "type": "progress-circle", "props": { "variant": "indeterminate", "color": "primary" } }
+  ]
+}
+```
+
+### Explicit grid positioning (spans rows)
+```json
+{
+  "type": "layout-cell",
+  "props": { "colStart": 2, "rowStart": 1, "rowSpan": 2 },
+  "style": { "padding": "20px", "backgroundColor": "#fff" },
+  "children": []
+}
+```

package/training/27-card.md

@@ -0,0 +1,87 @@
+# Component: card
+
+A MUI Card container with an optional title and subheader. Contains arbitrary child components.
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Optional identifier. |
+| `title` | expression | Card header title text, e.g. `"User Details"` or `data.project.name`. Leave blank for no header. |
+| `subheader` | expression | Secondary text below the title, e.g. a date or role. |
+| `variant` | select | `elevation` — floating card with shadow. `outlined` — flat card with border, no shadow. |
+
+---
+
+## Props — Style Tab
+
+No dedicated style tab. Use the parent layout-cell style for spacing/shadow. The card itself uses MUI's default elevation/border.
+
+---
+
+## Props — Actions Tab
+
+No actions. Card is a container component.
+
+---
+
+## Use Cases
+
+**When to use:**
+- Grouping related content with a visual card boundary (user profile, product, post).
+- Dashboard panels with a labeled title area.
+- List items rendered via a `repeater` — each repeater item is a card.
+
+**When NOT to use:**
+- When you want full control of the outer styling → use a `layout-cell` with `backgroundColor`, `borderRadius`, `boxShadow`.
+- When the card border/shadow would conflict with a custom design → style via layout-cell instead.
+- Tabs with panel switching → use `menu`.
+
+---
+
+## Schema Examples
+
+### Basic card with title
+```json
+{
+  "type": "card",
+  "props": {
+    "title": "Personal Information",
+    "variant": "elevation"
+  },
+  "children": [
+    { "type": "input", "props": { "key": "name", "label": "Name" } },
+    { "type": "input", "props": { "key": "email", "label": "Email" } }
+  ]
+}
+```
+
+### Outlined card with subheader
+```json
+{
+  "type": "card",
+  "props": {
+    "title": "data.project.name",
+    "subheader": "data.project.createdAt",
+    "variant": "outlined"
+  },
+  "children": [
+    { "type": "label", "props": { "text": "data.project.description", "variant": "body2" } }
+  ]
+}
+```
+
+### Card without header (container only)
+```json
+{
+  "type": "card",
+  "props": {
+    "variant": "elevation"
+  },
+  "children": [
+    { "type": "kpi-metric", "props": { "valueKey": "data.total", "label": "Total Sales", "format": "currency" } }
+  ]
+}
+```

package/training/28-wizard.md

@@ -0,0 +1,126 @@
+# Component: wizard
+
+A multi-step stepper form. Contains `wizard-step` children. Handles navigation (Back/Next/Finish) with optional linear enforcement and lifecycle hooks.
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Unique identifier for the wizard. |
+| `orientation` | select | `horizontal` — stepper bar across the top. `vertical` — stepper on the left side. |
+| `variant` | select | `standard` — step numbers above connector lines. `alternativeLabel` — step labels below the circles. |
+| `linear` | boolean | `true` (default) forces sequential completion — user cannot jump to a later step without completing previous. `false` allows clicking any step. |
+| `hideNavigation` | boolean | `true` hides Back/Next/Finish buttons. Use when you control navigation via custom buttons in step content. |
+| `activeStep` | expression | Controlled active step index. When set, wizard is fully controlled from external state. |
+| `backLabel` | expression | Label for the Back button. Default: `"Back"`. |
+| `nextLabel` | expression | Label for the Next button. Default: `"Next"`. |
+| `finishLabel` | expression | Label for the Finish button on the last step. Default: `"Finish"`. |
+| `nextColor` | select | `primary` · `secondary` · `success` · `error` · `warning` · `info` · `inherit` |
+| `nextVariant` | select | `text` · `outlined` · `contained` |
+| `backColor` | select | Same options as nextColor. |
+| `backVariant` | select | Same options as nextVariant. |
+| `onStepChange` | code | Runs when the active step changes. Available variables: `from`, `to`, `direction` (`"next"` / `"back"` / `"jump"`), `goToStep`, `nextStep`, `prevStep`. |
+| `onFinish` | code | Runs when the user clicks Finish on the last step. Available variables: `goToStep`, `nextStep`, `prevStep`. |
+
+---
+
+## Props — Style Tab
+
+No dedicated style tab. Layout via parent cell.
+
+---
+
+## Props — Actions Tab
+
+No action tab — use `onStepChange` and `onFinish` code fields in Main.
+
+---
+
+## Use Cases
+
+**When to use:**
+- Multi-step registration/onboarding forms.
+- Checkout flows: Cart → Shipping → Payment → Review.
+- Guided configuration wizards.
+- Any process where steps have dependencies and need validation before proceeding.
+
+**When NOT to use:**
+- Simple tabbed content without sequential logic → use `menu`.
+- Unlimited, non-linear navigation → use `menu`.
+- Single form that doesn't need step structure.
+
+---
+
+## Schema Examples
+
+### Basic 3-step wizard
+```json
+{
+  "type": "wizard",
+  "props": {
+    "key": "registrationWizard",
+    "orientation": "horizontal",
+    "variant": "standard",
+    "linear": true,
+    "nextLabel": "Continue",
+    "finishLabel": "Submit Registration",
+    "nextColor": "primary",
+    "nextVariant": "contained"
+  },
+  "children": [
+    {
+      "type": "wizard-step",
+      "props": {
+        "key": "personal",
+        "label": "Personal Info",
+        "description": "Your basic details"
+      },
+      "children": [
+        { "type": "input", "props": { "key": "firstName", "label": "First Name", "required": true } },
+        { "type": "input", "props": { "key": "lastName", "label": "Last Name", "required": true } }
+      ]
+    },
+    {
+      "type": "wizard-step",
+      "props": {
+        "key": "contact",
+        "label": "Contact",
+        "description": "How to reach you"
+      },
+      "children": [
+        { "type": "input", "props": { "key": "email", "label": "Email", "required": true } },
+        { "type": "input", "props": { "key": "phone", "label": "Phone" } }
+      ]
+    },
+    {
+      "type": "wizard-step",
+      "props": {
+        "key": "confirm",
+        "label": "Review & Submit"
+      },
+      "children": [
+        { "type": "label", "props": { "text": "Please review your details before submitting.", "variant": "body2" } }
+      ]
+    }
+  ]
+}
+```
+
+### Wizard with onFinish submission
+```json
+{
+  "type": "wizard",
+  "props": {
+    "key": "checkoutWizard",
+    "orientation": "horizontal",
+    "linear": true,
+    "finishLabel": "Place Order",
+    "nextColor": "primary",
+    "nextVariant": "contained",
+    "onFinish": "submitOrder({ cart: data.cart, shipping: form })"
+  },
+  "children": []
+}
+```

package/training/29-wizard-step.md

@@ -0,0 +1,92 @@
+# Component: wizard-step
+
+A single step inside a `wizard`. Must be a direct child of `wizard`. Contains the form fields or content for that step.
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Step identifier. Used in navigation logic. |
+| `label` | expression | Step label shown in the stepper header, e.g. `"Personal Info"`. |
+| `description` | expression | Short subtitle shown below the step label in the stepper. |
+| `optional` | boolean | `true` shows `"(Optional)"` below the step label. |
+| `completed` | expression | Expression returning `true` marks the step with a checkmark icon. |
+| `error` | expression | Expression returning `true` marks the step in error state (red). |
+| `onEnter` | code | Runs when this step becomes active. Available: `stepIndex`, `goToStep`, `nextStep`, `prevStep`. Use to load data or reset form state. |
+| `onNext` | code | Runs before leaving this step when clicking Next. Return `true`/`undefined` to allow navigation. Return `false` to silently block. Return a string to block and display as an error message. Available: `stepIndex`, `goToStep`, `nextStep`, `prevStep`. |
+
+---
+
+## Props — Style Tab
+
+No dedicated style tab.
+
+---
+
+## Props — Actions Tab
+
+No action tab — lifecycle code is in the Main tab via `onEnter` and `onNext`.
+
+---
+
+## Use Cases
+
+- Each step in a `wizard` flow.
+- `onNext` for step validation: return `"Email is required"` if `!form.email`.
+- `onEnter` to pre-load data for the step: fetch the user's address when entering the shipping step.
+- `completed` expression to show a green checkmark when step data is valid.
+- `error` expression to highlight a step that failed server-side validation.
+
+---
+
+## Schema Examples
+
+### Step with validation
+```json
+{
+  "type": "wizard-step",
+  "props": {
+    "key": "personalInfo",
+    "label": "Personal Info",
+    "description": "Your basic details",
+    "required": false,
+    "onNext": "if (!form.firstName || !form.email) return 'Please fill in all required fields.'"
+  },
+  "children": [
+    { "type": "input", "props": { "key": "firstName", "label": "First Name", "required": true } },
+    { "type": "input", "props": { "key": "email", "label": "Email", "required": true } }
+  ]
+}
+```
+
+### Step with data load on enter
+```json
+{
+  "type": "wizard-step",
+  "props": {
+    "key": "shipping",
+    "label": "Shipping",
+    "onEnter": "fetchAddresses({ userId: data.userId })"
+  },
+  "children": [
+    { "type": "dropdown", "props": { "key": "addressId", "label": "Select Address", "options": "data.addresses" } }
+  ]
+}
+```
+
+### Optional step with completion indicator
+```json
+{
+  "type": "wizard-step",
+  "props": {
+    "key": "documents",
+    "label": "Documents",
+    "optional": true,
+    "completed": "data.documentsUploaded",
+    "error": "data.documentError"
+  },
+  "children": []
+}
+```

package/training/30-repeater.md

@@ -0,0 +1,123 @@
+# Component: repeater
+
+Renders a template multiple times — once per item in an array (or a fixed count). Each repetition has its own scoped `dataItem` and `itemIndex` available in expressions.
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Unique identifier. When combined with `dataKey`, the complete array is accessible at `data[key]`. |
+| `items` | expression | Array of objects to iterate, e.g. `data.employees`. Each item is exposed as `dataItem` in child expressions. |
+| `count` | expression | Fixed number of repetitions when `items` is not set. The repeater generates `count` empty slots. |
+| `dataKey` | expression | Parent data key where item values are stored/read back. When set, each item's inputs write to `data[dataKey][index]`, and the full array is readable at `data[dataKey]`. |
+| `itemKey` | expression | Property on each item to use as the React key for stable rendering, e.g. `"id"`. Falls back to index. |
+| `widgetId` | expression | ID of a saved widget to render as the item template. When set, the repeater fetches that widget and renders it instead of inline children. |
+| `direction` | select | `vertical` — items stack top-to-bottom. `horizontal` — items flow left-to-right. `wrap` — horizontal flow that wraps to next line. |
+| `gap` | expression | Spacing between items, e.g. `"16px"`. |
+
+---
+
+## Props — Style Tab
+
+No dedicated style tab. Control via parent layout-cell.
+
+---
+
+## Props — Actions Tab
+
+No actions. Each child component inside the repeater handles its own events.
+
+---
+
+## Available Variables Inside Repeater Children
+
+- `dataItem` — the current item object from `items` array.
+- `itemIndex` — the zero-based index of the current item.
+- `data[dataKey][itemIndex]` — scoped form data for this item's inputs.
+
+---
+
+## Use Cases
+
+**When to use:**
+- Rendering a list of cards: employee cards, product tiles.
+- Line-item entry: invoice lines, order items (with `dataKey` for editable rows).
+- Dynamic form: "Add another contact" pattern.
+- Grid of similar items: photo gallery, tag list.
+
+**When NOT to use:**
+- Tabular data with sorting/filtering → use `dataGrid`.
+- Static content that doesn't repeat → use `layout` cells.
+- Server-paged large datasets → use `reportViewer`.
+
+---
+
+## Schema Examples
+
+### Read-only list of employee cards
+```json
+{
+  "type": "repeater",
+  "props": {
+    "key": "employeeList",
+    "items": "data.employees",
+    "itemKey": "id",
+    "direction": "vertical",
+    "gap": "12px"
+  },
+  "children": [
+    {
+      "type": "layout-cell",
+      "style": { "backgroundColor": "#fff", "borderRadius": "8px", "padding": "16px", "boxShadow": "0 1px 4px rgba(0,0,0,0.08)" },
+      "children": [
+        { "type": "header", "props": { "text": "dataItem.name", "variant": "h6" } },
+        { "type": "label", "props": { "text": "dataItem.role", "variant": "body2", "color": "textSecondary" } }
+      ]
+    }
+  ]
+}
+```
+
+### Editable line items (with dataKey)
+```json
+{
+  "type": "repeater",
+  "props": {
+    "key": "invoiceLines",
+    "items": "data.lines",
+    "dataKey": "lines",
+    "itemKey": "id",
+    "direction": "vertical",
+    "gap": "8px"
+  },
+  "children": [
+    {
+      "type": "layout",
+      "props": { "cols": 3, "gap": 8 },
+      "children": [
+        { "type": "layout-cell", "children": [{ "type": "input", "props": { "key": "description", "label": "Description", "value": "dataItem.description" } }] },
+        { "type": "layout-cell", "children": [{ "type": "number", "props": { "key": "qty", "label": "Qty", "value": "dataItem.qty" } }] },
+        { "type": "layout-cell", "children": [{ "type": "number", "props": { "key": "price", "label": "Price", "value": "dataItem.price", "formatType": "currency", "currencySymbol": "$" } }] }
+      ]
+    }
+  ]
+}
+```
+
+### Fixed count (no data)
+```json
+{
+  "type": "repeater",
+  "props": {
+    "key": "ratings",
+    "count": 5,
+    "direction": "horizontal",
+    "gap": "8px"
+  },
+  "children": [
+    { "type": "label", "props": { "text": "itemIndex + 1 + ' - Rating slot'", "variant": "caption" } }
+  ]
+}
+```