# Alus Builder — AI Generation Reference (non-MCP / copy-paste)

You are generating a page for **Alus Builder** (the Alusio visual website builder). The user will
**copy your JSON and Import it** into the builder. Follow this exactly.

## OUTPUT CONTRACT — read first

Output **one JSON code block** — the minimal page schema:

```json
{
  "elements": [ /* AlusElement[] — the page tree */ ]
}
```

- `elements` is the page tree (array of elements). This shape alone is enough — the Import dialog accepts it directly.
- You do **NOT** need any envelope. The `{ "source": "alusioCopiedElements", "version", "exportedAt", … }` wrapper from the builder's Export is **optional** metadata, never required — do not hand-author it.
- A single bare element node `{ "id", "type", "props", … }` and a bare array `[ {…} ]` are also accepted, but prefer `{ "elements": [...] }`.
- Do **NOT** build a global header/footer — the site adds them automatically around every page.
- Every page MUST be **mobile-responsive**: add `tablet`/`mobile` overrides — stack multi-column grids to 1 column and reduce tall section padding on phones. Standardize spacing/radius/shadow/color/font-size through `var(--theme-*)` tokens, never hardcoded values. See the Mobile & responsive + theme-token sections below.
- Output ONLY the JSON block (no commentary) unless the user asks you to explain.

> There are no tools to call here — **everything you need is in this document**: the rules, the full
> element type list, the template-type gating, and worked examples.

---


# Alus Builder — AI Generation Guide (Entry Point)

> **Read this first.** This is the thin orientation layer for generating valid `BuilderSchema`
> JSON. It does NOT repeat the full block spec — it points you at the right resource, lists the
> mistakes that actually break output, and gives you a decision tree. The detail lives in the
> resources indexed at the bottom; pull them on demand instead of guessing.

---

## 0. The 30-second contract

1. Output shape is always `{ "elements": AlusElement[] }`. Nothing else at the root.
2. Every element needs a unique `id` (short random string, e.g. `"el-a1b2"`) and a `type`.
3. Only `section` / `container` / `block` carry arbitrary `children`. `iconList` carries
   `iconListItem` children only; `accordion` carries `accordionItem` children only. Nothing else
   may have `children`.
4. `props` is required (can be `{}`). `style` and `selectorConfig` are optional — omit when unused.
5. **The save tool is the validator.** `pages_set_builder_schema` / `kits_set_builder_schema` /
   `themes_set_template` validate server-side AND run the contrast lint in the same call, returning a
   fix-list on error. Submit the schema **as an object** directly — do NOT run a separate
   `validate_schema` pass first (it just doubles the payload). If the save returns errors, fix and
   resubmit. Use `validate_schema` for a schema you are NOT yet saving — e.g. one you will paste into
   the builder's Import Schema box; it runs the identical gate (accepts the object directly — no need
   to stringify).
6. Colors/fonts/radius come from the site **Theme** via CSS vars. Use `var(--theme-*, #fallback)` —
   never invent token names, always include a hex fallback.

---

## 1. Decision tree — what element do I reach for?

**Need a layout box?**
- Full-bleed band (one per logical page section) → `section` (`htmlTag: "section"`).
- Centered content wrapper inside a section → `container`. **It is ALREADY boxed + centered** at the
  theme's container width (`--theme-container-width`, ~1100px) via CSS — do NOT set
  `maxWidth: "1100px"` or `marginLeft/Right: "auto"` for the default. Only set `maxWidth` to make it
  **narrower** (e.g. `"720px"` for a reading column) or wider; margins stay auto automatically.
- A flex/grid child cell (column, card, row item) → `block`.
- Columns side-by-side → `container`/`block` with `style.layout.display: "grid"` +
  `gridTemplateColumns: "1fr 1fr"`. **Never** reach for legacy `twoColLayout`/`tabs`/`col1` — removed.

**Need text?**
- Big title → `heading` (`level` h1–h6). Inline emphasis only → `mode: "rich"` + `richText`.
- Paragraph with inline formatting / multiple blocks → `richText` (`body` = HTML).
- Plain paragraph, no toolbar needed → `basicText`.

**Need it to pull live content (product/post/page/course)?**
- → Use a **Dynamic element** (`productTitle`, `postContent`, …) OR a primitive + entity tag
  (`heading` + `{product_title}`). See §3. These only resolve inside the matching **template type**
  or a `queryLoop` on that data source — elsewhere they render placeholders.

**Need a repeating grid of items (recent products, blog list)?**
- → ONE template `block`/card with a **root-level `queryLoop`** (sibling of `props`, NOT inside it), inside a grid `container`. The block IS
  the repeated template (repeat-self model). Descendants read the current row via entity
  tags. Don't hand-emit N copies. See §4.

**Need a carousel?** → `slider` with each child a slide (or one `queryLoop` child for dynamic).

**Need a checklist / feature list?** → `iconList` > `iconListItem[]` (NOT generic blocks + icons).

**Need an FAQ?** → `accordion` > `accordionItem[]`.

When unsure which element exists, call `list_blocks` / `get_block_schema` — don't invent a type.

---

## 2. Anti-patterns — the mistakes that actually fail generation

| ❌ Don't | ✅ Do | Why |
|---|---|---|
| `children` on `heading`/`image`/`button`/etc. | Keep leaf elements childless | Validator rejects it |
| `iconListItem`/`accordionItem` at root or under `section` | Only inside `iconList`/`accordion` | Child-only; validator rejects |
| Invent a type like `"hero"`, `"card"`, `"column"` | Compose from `section`/`container`/`block` | Only registry types render |
| Literal `gap: "24px"` | `gap: "var(--theme-space-lg)"` | Literals freeze layout off the theme scale |
| `maxWidth: "1100px"` + `margin auto` on a `container` | Nothing — leave it; only set `maxWidth` to go narrower/wider | `container` is already centered at the theme width; the redundant value overrides the theme token and sticks as a default in the inspector |
| Light text with no background color set | Set `style.background.color` on the band, or dark text | The classic invisible-text bug (contrast lint) |
| Invent `--theme-brand-primary` etc. | Use names from `get_theme_tokens`, always with hex fallback | Unknown vars resolve to nothing |
| `display: "grid"` expecting 3 columns by default | Set `gridTemplateColumns` explicitly | Empty grid = single `auto` column |
| `layoutMode: "simple"` on a horizontal row / grow-flex item | `layoutMode: "advanced"` | Wrong mode hides Inspector controls |
| Dynamic element (`addToCartButton`) on a `home`/`single_page` template | Only on its compatible surface (see `get_template_guide`) | Renders placeholder otherwise |
| `pageTitle` / `pageContent` inside a **Page** | `heading` / `richText` with the copy written in | Rejected on save. They bind to the page entity and exist only on the `single_page` TEMPLATE; the Page builder hides them from the palette, so the merchant could never edit what you emitted |
| Recreating the global header/footer inside a page/template schema | Leave them out — the site renders the theme header/footer automatically | Duplicated, misaligned chrome |
| Raw HTML in a page's text `content` to fake a layout | Use `pages_set_builder_schema` (builder mode) — never the text field | The text field is not a design surface; it won't render as a designed page |
| Empty `children: []` / placeholder-less output | Fill with real placeholder content | Empty sections look broken |
| Per-page colors/fonts in `style` everywhere | Lean on theme tokens; only override intentionally | Keeps the theme cascade working |

**`layoutMode` rule of thumb:** emit `"advanced"` for any horizontal row, any grow/shrink flex item,
or any grid beyond plain columns. Emit `"simple"` only for a plain column stack or a plain
columns-grid. When in doubt → `"advanced"`.

---

## 3. Dynamic content — tags vs dedicated elements

Both are valid and coexist:
- **Dedicated Dynamic elements** (`productTitle`, `productPrice`, `postFeaturedImage`, …) — richer
  Inspector controls, friendlier. Prefer these when a dedicated element exists for the field.
- **Primitive + entity tag** — `heading` with `text: "{product_title}"`, `richText` with
  `{post_content}`. Handy for inline text and inside query loops.

Tags resolve against: (a) the ambient entity on a matching **template type**, or (b) the current
row inside a `queryLoop` on that data source. Outside both → placeholder text.

- Iteration metadata inside a loop: `{{loop.index}}`, `{{loop.first}}`, `{{loop.count}}`.
- The legacy data-source-agnostic `{{item.*}}` set is **removed** — do not emit it.
- Price tags (`{product_price}`, `{product_sale_price}`, `{product_original_price}`) are
  **pre-formatted** in the site currency — do NOT add a `|currency` filter.

Call `get_dynamic_tags` (optionally scoped by context: product/post/course/page) for the live list,
and `list_dynamic_filters` for filters (`truncate`, `date`, `default`, `upper`, `image_url`, …).

---

## 4. Query Loop (repeat-self model)

The element holding `queryLoop` is the **template that gets repeated N times**.

🔴 **`queryLoop` sits at the ELEMENT ROOT, next to `props` / `style` / `children` — never
inside `props`.** Zod strips unknown keys, so `props.queryLoop` is accepted with a green
save and then silently dropped: the loop never runs and the block renders exactly once.
Nothing warns you. (Measured 2026-09-03; this guide and `examples/templates/shop-catalog.json`
both had it wrong, so every schema generated from them lost its loops.)

Shape: `{ enabled, dataSource, limit, orderBy, categoryId? }` — `enabled` MUST be `true`,
`dataSource` is one of `posts|products|courses|bundles|pages`, `orderBy` one of
`date_desc|date_asc|title_asc|title_desc|price_asc|price_desc`. There is no `source` key.

Typical:

```
container[display:grid, gridTemplateColumns:"repeat(3,1fr)"]
  └─ block{ queryLoop: { enabled:true, dataSource:"products", limit:6, orderBy:"date_desc" } }  ← repeated once per product
       ├─ productImage / image+{product_image}
       ├─ heading + {product_title}
       └─ productPrice / {product_price}
```

Do not emit one block per item by hand. One template block + `queryLoop` → renderer expands it.
For a dynamic carousel: a `slider` with ONE `queryLoop` child. For masonry: a grid container with
`style.layout.masonry: true` wrapping the loop block. Call `get_data_contexts` for available sources.

---

## 5. Template type gating — what belongs where

Every page is rendered through a **template type**. Dynamic elements are gated to compatible types;
some elements are forbidden in some types. Before generating any template, call
**`get_template_kit(type)`** — ONE call returns the guide (purpose, required/recommended/forbidden,
layout, notes) + every relevant block schema + suggested patterns + critical rules. Don't fan out
into many `get_block_schema` calls.

Quick map (full detail via `get_template_guide`):

| Template type | Renders | Key dynamic elements allowed |
|---|---|---|
| `home` | Landing / homepage | Recent-items loop subset (title/image/price/excerpt) |
| `tenantPage` | **A tenant Page** (`pages_set_builder_schema`) — the ordinary case | none: write the copy straight into `heading` / `richText` |
| `single_page` | The theme TEMPLATE wrapped around every page | page* (title/content/featured image) |
| `single_post` | One blog post | post* (title/content/featured/excerpt/meta) |
| `post_archive` / `post_category` / `search` | Post lists | post* in a loop |
| `single_product` | One product | full product* set incl. addToCart, variants, quantity |
| `shop_catalog` / `product_category` | Product lists | product* loop subset |
| `single_bundle` | A product bundle | product* + checkout helpers |
| `single_course` | One course | course* + curriculum |
| `course_archive` | Course list | course* loop subset |
| `checkout` | Checkout flow | checkout* family (items/form/shipping/payment/summary) |
| `header` / `footer` | Site chrome fragments | logo, menu, searchBar, socialIcons; site_* shortcodes |

Interactive single-entity elements (`addToCartButton`, `productVariants`, `productQuantity`,
`productDescription`, `postContent`) need a single ambient entity → only on `single_*`, never in a
recent-items grid on `home`.

---

## 6. Mobile, responsive & theme tokens (REQUIRED)

### Mobile & responsive — do not skip

Every page is viewed on phones first. `style` is keyed by breakpoint and cascades:
**`desktop` is the base; `tablet` and `mobile` are partial overrides.** Breakpoints:
**tablet ≤1024px**, **mobile ≤767px**. You only repeat the keys that change.

Checklist for every page you generate:
- **Stack multi-column grids.** Any `gridTemplateColumns` with >1 column MUST add a `mobile`
  override to `"repeat(1, 1fr)"`, and usually a `tablet` step too (e.g. 4→2→1, 3→2→1, 2→1).
- **Reduce big section padding on mobile.** Section `paddingTop`/`paddingBottom` of
  `var(--theme-space-section)` (96) is too tall on phones — drop to `var(--theme-space-xl)` (32)
  or `-lg` (24) at `style.mobile.layout`.
- **Let type auto-scale.** Set `style.desktop.typography.fontSize` and leave `tablet`/`mobile`
  **empty** — it auto-scales 0.9× (tablet) / 0.85× (tablet→mobile) / 0.75× (desktop→mobile).
  Only set a `mobile` fontSize for a non-proportional size. `rem`/`em` desktop values cascade
  as-is (follow browser zoom, no auto-scale).
- Switch a flex `row` to `direction: "column"` on mobile when items get cramped.

```json
{
  "type": "container",
  "style": {
    "desktop": { "layout": { "display": "grid", "gridTemplateColumns": "repeat(3, 1fr)", "gap": "var(--theme-space-xl)", "paddingTop": "var(--theme-space-section)" } },
    "tablet":  { "layout": { "gridTemplateColumns": "repeat(2, 1fr)" } },
    "mobile":  { "layout": { "gridTemplateColumns": "repeat(1, 1fr)", "paddingTop": "var(--theme-space-xl)" } }
  }
}
```

### Standardize with theme tokens — don't hardcode

Pull every standardizable value from a theme token — `var(--token, #fallback)`. Always include a
fallback; never invent token names (unknown names silently fall back). Call `get_theme_tokens` for
the live values.

| Dimension (CSS) | Token family |
|---|---|
| `gap` / `rowGap` / `columnGap`, `padding*` | `--theme-space-xxs…-section` |
| `borderRadius` | `--theme-radius-button` / `-card` / `-pill` / `-sm` / `-md` |
| `boxShadow` / elevation | `--theme-shadow-xs` / `-sm` / `-md` / `-lg` |
| `fontSize` | `--theme-text-display-xl/lg/md` · `-title-lg/md` · `-body-md/sm` · `-caption` |
| `lineHeight` | `--theme-leading-tight` / `-normal` / `-relaxed` |
| `color` / `backgroundColor` / `borderColor` | `--theme-ink` / `-body` / `-muted` / `-primary` / `-on-primary` / `-canvas` / `-surface-card` / `-surface-dark` / `-on-dark` / `-hairline` |
| `fontFamily` | `--theme-heading-font` / `--theme-body-font` |
| container `maxWidth` | `--theme-container-width` |

- **Spacing scale:** `--theme-space-xxs`(4) `-xs`(8) `-sm`(12) `-md`(16) `-lg`(24) `-xl`(32)
  `-xxl`(48) `-section`(96). Default body gaps → `var(--theme-space-lg)`. Literal px only for
  intentionally out-of-scale values (`0px`, `2px` hairline).
- A card should pull `borderRadius: var(--theme-radius-card)` + `boxShadow: var(--theme-shadow-sm)`
  + `backgroundColor: var(--theme-surface-card, #fff)` rather than ad-hoc values.

---

## 7. Generation workflow (recommended order)

1. Identify the **surface** from the request. Building one concrete page a merchant asked for →
   `tenantPage`. Building a reusable theme slot → its template type (`home` for the site landing,
   `single_page` for the wrapper rendered around every page, etc.).
2. `get_template_kit(type)` — one call for guide + schemas + patterns + rules.
3. Look at a **full-page example** for the closest topic: `list_examples` → `get_example(name)`.
4. Assemble: `section` → `container` → content, top to bottom. Fill placeholders with real copy.
5. Use tokens for spacing/color; set background on dark bands.
6. **Submit directly** via the save tool (`pages_set_builder_schema` / `kits_set_builder_schema` /
   `themes_set_template`) — pass the schema as an object. It validates + lints in one call.
7. If it returns errors or contrast warnings, fix and resubmit. Done when it saves clean.
   (Only use `validate_schema` to preview something you are not yet saving — it runs the same gate.)

**Field caps that bite** (the Zod gate, not style advice): `style.*.background.color` and
`border.color` are capped at **50 characters** — `var(--theme-x, #hex)` fits, a long
`color-mix(in srgb, var(--theme-x, #hex) 15%, transparent)` does NOT (use `rgba()` or drop the
fallback). `boxShadow` 200, `gradientCss` 2000, `border.radius` 100, typography fields 100.
`layout.flexGrow` / `flexShrink` / `order` are **numbers**, not strings. `heading` requires `text`
even when `mode: "rich"` (keep it as the plain-text fallback next to `richText`).

### Editing an existing page: `set` vs `patch`

- **Creating a page, or replacing its whole layout** → `pages_set_builder_schema` (full schema).
- **Tweaking a page that is already builder-type** (recolor a section, add one FAQ item,
  remove a block, reorder) → `pages_patch_builder_schema`. Send only the delta by element
  `id` instead of regenerating the entire JSON — far less to write, much faster.
  1. `pages_get` to read current element `id`s and the layout `version`.
  2. Send `ops` (applied in order): `update {id, set}` (deep-merge; `null` deletes a key),
     `replace {id, element}`, `insert {element, parentId?, index?|before?|after?}`,
     `remove {id}`, `move {id, parentId?, …}`. A later op may reference an id an earlier op created.
  3. Pass `baseVersion` = the `version` from step 1 so a concurrent edit can't be clobbered.
  The patch validates the FULL resulting tree (same gates as `set`) and saves nothing if anything fails.

---

## 8. Resource index (call these, don't memorize)

| Need | Resource |
|---|---|
| Full narrative spec | `builder-spec.md` (knowledge file) |
| Machine spec (props/defaults/categories) | `builder-spec.json` + `get_block_schema(type)` |
| All types | `list_blocks` (optional `category`) |
| One element's controls | `get_element_controls(type)` / `get_control_options` |
| Per-template rules | `get_template_guide(type)` |
| One-shot template bundle | `get_template_kit(type)` |
| Section UI patterns | `list_patterns` → `get_pattern(name)` |
| **Full-page & per-template examples** | `list_examples` → `get_example(name)` |
| Theme tokens | `get_theme_tokens` |
| Dynamic tags / filters | `get_dynamic_tags`, `list_dynamic_filters` |
| Loop data sources | `get_data_contexts` |
| Nesting rules | `get_nesting_rules` |
| Typography slots / responsive | `get_typography_slots`, `get_responsive_typography_rules` |
| Header config | `get_header_settings` |
| Save (validates + lints) | `pages_set_builder_schema` / `kits_set_builder_schema` / `themes_set_template` |
| Incremental edit by id | `pages_patch_builder_schema` (update/replace/insert/remove/move; pass `baseVersion`) |
| Preview-only validate | `validate_schema` (same gate as save; accepts object or string) |

> Maintenance note: this guide is intentionally thin so it doesn't drift. Detailed truth lives in
> `template-rules.ts`, per-element `meta.ts`, and `builder-spec.json`. If a rule here contradicts
> those, those win — fix this file.


## All element types

### layout
- `section` (container) — Struktur/pembagi halaman (flex column)
- `container` (container) — Kontainer 1100px terpusat
- `block` (container) — Flexbox lebar penuh (flex column)

### checkout
- `checkoutItems` — Daftar produk dalam keranjang
- `checkoutShipping` — Pilihan metode pengiriman
- `checkoutPayment` — Pilihan metode pembayaran
- `checkoutMessages` — Tempat semua pesan sistem checkout tampil — wajib ada di tiap template

### dynamic
- `postTitle` — Judul post — terisi otomatis dari konten saat halaman dirender.
- `postContent` — Isi konten post — terisi otomatis dari konten saat halaman dirender.
- `postFeaturedImage` — Gambar utama post — terisi otomatis dari konten.
- `postExcerpt` — Ringkasan singkat post — fall back ke trim konten kalau excerpt kosong.
- `postMeta` — Penulis, tanggal, kategori — komposit dengan separator.
- `productTitle` — Nama produk — terisi otomatis dari konten saat halaman dirender.
- `productPrice` — Harga produk — otomatis tampilkan harga sale jika sedang berlaku.
- `productDescription` — Deskripsi produk — terisi otomatis dari konten.
- `productImage` — Thumbnail produk — single image (untuk gallery, pakai Product Image Gallery).
- `productVariants` — Pemilih varian produk (pills / dropdown / list) — sinkron dengan Add to Cart & Quantity.
- `productPlans` — Pemilih paket untuk produk digital (multiple plans) — sinkron dengan Add to Cart.
- `productQuantity` — Stepper qty (− 1 +) untuk Add to Cart. Otomatis mengikuti stok varian.
- `productCustomerNote` — Input catatan opsional dari customer. Nilainya ikut ke keranjang saat Add to Cart.
- `addToCartButton` — Tombol Add to Cart / Buy Now. Sinkron dengan varian & qty terpilih; di dalam Query Loop jadi tambah-langsung atau tautan ke halaman produk.
- `productStock` — Indikator status stok (Tersedia / Stok Terbatas / Habis). Bisa diatur tampil selalu atau hanya saat stok habis. Otomatis update saat varian dipilih.
- `productSku` — Kode SKU produk — otomatis update saat varian dipilih.
- `productSalePercent` — Badge diskon — "−25%" atau "Hemat Rp 50.000". Otomatis tersembunyi jika tidak sedang sale.
- `productSalePrice` — Harga diskon saja — otomatis tersembunyi jika produk tidak sedang sale.
- `productRegularPrice` — Harga asli (sebelum diskon) — bisa dicoret otomatis saat produk sedang sale.
- `productCountdown` — Countdown sampai jadwal sale produk berakhir. Otomatis tersembunyi jika produk tidak punya sale aktif.
- `productShare` — Tombol share produk ke WhatsApp, Facebook, Twitter/X, Telegram, atau salin link.
- `productWholesaleTable` — Tabel harga grosir per kuantitas. Otomatis update sesuai varian terpilih.
- `pageTitle` — Judul halaman — terisi otomatis dari konten saat halaman dirender.
- `pageContent` — Isi konten halaman — terisi otomatis dari konten saat halaman dirender.
- `pageFeaturedImage` — Gambar utama halaman — terisi otomatis dari konten.
- `courseTitle` — Nama course — terisi otomatis saat halaman dirender.
- `courseDescription` — Deskripsi course — terisi otomatis dari konten.
- `courseImage` — Thumbnail course — terisi otomatis dari konten.
- `coursePrice` — Harga kursus dari produk tertautnya — sadar diskon, gratis, dan belum tersedia.
- `courseCurriculum` — Daftar modul & materi kursus langsung dari database, lengkap dengan status terkunci.
- `courseEnroll` — Tombol aksi kursus — menyesuaikan otomatis: mulai, lanjut, daftar gratis, beli, atau login.

### basic
- `heading` — Judul teks (H1 - H6)
- `basicText` — Paragraf teks polos tanpa toolbar
- `richText` — Konten teks dengan heading
- `video` — Embed video YouTube, Vimeo, atau Bunny.net
- `image` — Gambar (URL atau dari Media Library)
- `button` — Tombol dengan link
- `textLink` — Teks dengan hyperlink
- `icon` — Tampilkan satu icon dengan opsi link, frame, atau background
- `divider` — Garis pemisah antar konten
- `spacer` — Ruang kosong vertikal

### general
- `slider` (container) — Carousel dengan panah & dot — tiap anak jadi slide
- `logo` — Logo situs — auto dari Settings, atau image/text kustom
- `accordion` (container) — Konten expandable dengan pertanyaan & jawaban
- `breadcrumb` — Trail navigasi: Home > Section > Page (auto JSON-LD)
- `counter` — Angka statistik dengan animasi count-up saat masuk viewport
- `iconList` (container) — Daftar item (Item List) dengan icon, title, deskripsi & highlight badge
- `countdownTimer` — Hitung mundur menuju tanggal & waktu tertentu
- `alertBanner` — Kotak notifikasi atau pengumuman (info/success/warning/error)
- `mapEmbed` — Embed Google Maps untuk lokasi toko
- `searchBar` — Form pencarian — inline, overlay, atau icon expand.
- `menu` (container) — Header all-in-one: logo, items dengan dropdown/mega, plus tombol Login/Register/Account/Cart
- `htmlEmbed` — Embed kode HTML kustom atau dari AI
- `cart` — Icon keranjang + panel cart slide-in (off-canvas kanan)
- `miniCheckout` — Checkout compact 1 produk/bundle di landing page
- `accordionItem` (container) — Satu panel di dalam Accordion — punya judul + konten nested (drop zone)
- `iconListItem` — Satu item di dalam Icon List — punya icon, title, deskripsi & style lengkap
- `brand` — Logo / nama brand di dalam Navigation
- `menuItem` (container) — Satu item navigasi di dalam Navigation (bisa submenu / mega)
- `customMega` (container) — Dropdown mega berisi element bebas, di dalam sebuah Menu Item
- `menuAction` — Satu action header (login / cart / search / dll) di dalam Navigation

### ecommerce
- `productImageGallery` — Galeri foto produk (Featured + Gallery)
- `cartItems` — Daftar item keranjang dengan ubah jumlah & hapus
- `cartSummary` — Subtotal keranjang + tombol lanjut ke checkout

### forms
- `nameField` — Input nama lengkap
- `emailField` — Input email address
- `phoneField` — Nomor telepon atau WhatsApp
- `textareaField` — Input teks panjang
- `selectField` — Pilihan dari daftar opsi
- `checkboxField` — Centang persetujuan
- `customHtml` — Raw HTML block
- `submitButton` — Tombol submit formulir


## Element reference — props for every type

Use these to build with the FULL element set (not just section/container/block/heading). Each entry lists the element's `props`. **Layout/visual CSS** (display, gap, padding, color, background, border, …) does NOT go here — it lives in `style.{bp}.layout.*` / `style.{bp}.typography.*` etc. (see the guide above). Dynamic elements (productTitle, postContent, …) only resolve in their compatible template type or a query loop.

### layout
#### `section` · can have children
Struktur/pembagi halaman (flex column)
Props:
- `htmlTag` — select "div"|"section"|"article"|"aside"|"nav"|"header"|"footer"|"main"|"a"|"figure"|"address"|"ul"|"ol"|"li" — HTML Tag — default: "section"
- `layoutMode` — radio "simple"|"advanced" — default: "simple"

#### `container` · can have children
Kontainer 1100px terpusat
Props:
- `htmlTag` — select "div"|"section"|"article"|"aside"|"nav"|"header"|"footer"|"main"|"a"|"figure"|"address"|"ul"|"ol"|"li" — HTML Tag — default: "div"
- `layoutMode` — radio "simple"|"advanced" — default: "simple"

#### `block` · can have children
Flexbox lebar penuh (flex column)
Props:
- `htmlTag` — select "div"|"section"|"article"|"aside"|"nav"|"header"|"footer"|"main"|"a"|"figure"|"address"|"ul"|"ol"|"li" — HTML Tag — default: "div"
- `layoutMode` — radio "simple"|"advanced" — default: "simple"

### checkout
#### `checkoutItems`
Daftar produk dalam keranjang
Props:
- `showTitle` — checkbox — Tampilkan Judul
- `title` — optional string (default: 'Pesanan Kamu')
- `titleTag` — select "h1"|"h2"|"h3"|"h4"|"h5"|"h6" — Tag HTML — default: "h3"
- `showImage` — boolean (default: true)
- `showQuantity` — boolean (default: true)

#### `checkoutShipping`
Pilihan metode pengiriman
Props:
- `showTitle` — checkbox — Tampilkan Judul
- `title` — optional string (default: 'Metode Pengiriman')
- `titleTag` — select "h1"|"h2"|"h3"|"h4"|"h5"|"h6" — Tag HTML — default: "h3"

#### `checkoutPayment`
Pilihan metode pembayaran
Props:
- `showTitle` — checkbox — Tampilkan Judul
- `title` — optional string (default: 'Metode Pembayaran')
- `titleTag` — select "h1"|"h2"|"h3"|"h4"|"h5"|"h6" — Tag HTML — default: "h3"

#### `checkoutMessages`
Tempat semua pesan sistem checkout tampil — wajib ada di tiap template
Props:
- `showIcon` — optional boolean (default: true)

### dynamic
#### `postTitle`
Judul post — terisi otomatis dari konten saat halaman dirender.
Props:
- `level` — 'h1'|'h2'|'h3'|'h4'|'h5'|'h6' (default: 'h1')
- `alignment` — 'left'|'center'|'right' (default: 'left')
- `linkToPost` — boolean (default: false)

#### `postContent`
Isi konten post — terisi otomatis dari konten saat halaman dirender.
Props:
- `plainText` — boolean — strip HTML (default: false)

#### `postFeaturedImage`
Gambar utama post — terisi otomatis dari konten.
Props:
- `aspectRatio` — 'auto'|'16:9'|'4:3'|'1:1'|'3:2'|'21:9'
- `fit` — 'cover'|'contain'
- `preset` — 'cardMedium'|'cardWide'|'hero'|'thumbnail'
- `linkToPost` — boolean
- `fallbackBehavior` — select "hide"|"placeholder"|"image" — Jika gambar kosong — default: "hide"
- `fallbackImageUrl` — image — Gambar fallback

#### `postExcerpt`
Ringkasan singkat post — fall back ke trim konten kalau excerpt kosong.
Props:
- `maxLength` — number — 0 disables truncation
- `fallbackToContent` — boolean
- `ellipsis` — string

#### `postMeta`
Penulis, tanggal, kategori — komposit dengan separator.
Props:
- `showAuthor` — boolean
- `showDate` — boolean
- `showCategory` — boolean
- `dateFormat` — 'long'|'short'|'relative'
- `separator` — ' • '|' | '|' / '|' — '
- `alignment` — 'left'|'center'|'right'

#### `productTitle`
Nama produk — terisi otomatis dari konten saat halaman dirender.
Props:
- `level` — 'h1'-'h6'
- `alignment` — 'left'|'center'|'right'
- `linkToProduct` — boolean

#### `productPrice`
Harga produk — otomatis tampilkan harga sale jika sedang berlaku.
Props:
- `showOriginalOnSale` — boolean
- `saleColorScheme` — 'primary'|'destructive'|'inherit'
- `alignment` — 'left'|'center'|'right'
- `size` — 'sm'|'md'|'lg'|'xl'
- `outOfStockLabel` — string (shown in place of price when the selected variant is sold out)
- `variantPriceDisplay` — 'auto'|'base' (auto = min–max range before selection; base = always base price)
- `showShippingDiscountBadge` — checkbox — Tampilkan badge Potongan Ongkir

#### `productDescription`
Deskripsi produk — terisi otomatis dari konten.
Props:
- `plainText` — boolean

#### `productImage`
Thumbnail produk — single image (untuk gallery, pakai Product Image Gallery).
Props:
- `aspectRatio` — 'auto'|'1:1'|'4:3'|'3:2'|'16:9'
- `fit` — 'cover'|'contain'
- `preset` — 'productMain'|'cardMedium'|'cardWide'|'thumbnail'|'hero'
- `linkToProduct` — boolean

#### `productVariants`
Pemilih varian produk (pills / dropdown / list) — sinkron dengan Add to Cart & Quantity.
Props:
- `style` — 'pills'|'dropdown'|'list'|'grouped'
- `label` — string (empty hides)
- `showPrice` — boolean
- `showStockState` — boolean
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `productPlans`
Pemilih paket untuk produk digital (multiple plans) — sinkron dengan Add to Cart.
Props:
- `style` — 'cards'|'list'
- `label` — string (empty hides)
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `productQuantity`
Stepper qty (− 1 +) untuk Add to Cart. Otomatis mengikuti stok varian.
Props:
- `label` — string
- `minQuantity` — number
- `maxQuantity` — number (0 = no cap, defer to stock)
- `size` — 'sm'|'md'|'lg'
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `productCustomerNote`
Input catatan opsional dari customer. Nilainya ikut ke keranjang saat Add to Cart.
Props:
- `label` — string
- `placeholder` — string
- `maxLength` — number (1-1000)
- `rows` — number (textarea rows)

#### `addToCartButton`
Tombol Add to Cart / Buy Now. Sinkron dengan varian & qty terpilih; di dalam Query Loop jadi tambah-langsung atau tautan ke halaman produk.
Props:
- `label` — string
- `mode` — 'cart'|'buy-now'
- `showIcon` — boolean
- `iconName` — Lucide icon name (default 'ShoppingCart')
- `size` — 'sm'|'md'|'lg'
- `variant` — 'primary'|'secondary'|'outline'
- `outOfStockLabel` — string
- `needsSelectionLabel` — string
- `needsPlanLabel` — string (digital multi-plan)
- `subscribeLabel` — string (subscription)
- `contactLabel` — string (service/booking)
- `preorderLabel` — string - label saat produk dalam mode pre-order (tombol TETAP aktif)
- `comingSoonLabel` — string - label sebelum jendela pre-order rilis dibuka
- `soldOutLabel` — string - label saat kuota pre-order event habis
- `chooseOptionsLabel` — string - label saat tombol ada DI DALAM kartu Query Loop dan produknya butuh pilihan (varian / paket digital / PWYW / langganan / service). Dalam keadaan itu tombol berubah jadi TAUTAN ke halaman produk, bukan tombol mati (default: 'Pilih Opsi').
- `width` — DEPRECATED legacy — for sizing set style.layout.width ('fit-content' for Auto, '100%' for Full, or any length for Custom). Defaults to Full. Pre-migration data only; do NOT seed on new elements.
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `productStock`
Indikator status stok (Tersedia / Stok Terbatas / Habis). Bisa diatur tampil selalu atau hanya saat stok habis. Otomatis update saat varian dipilih.
Props:
- `displayMode` — 'always'|'lowAndOut'|'outOfStockOnly' - kapan badge tampil. always = selalu; lowAndOut = hanya saat stok menipis/habis; outOfStockOnly = hanya saat habis. Keadaan pre-order yang memblokir pembelian (comingSoon/soldOut) tetap tampil di semua mode.
- `inStockLabel` — string
- `outOfStockLabel` — string
- `lowStockLabel` — string
- `lowStockThreshold` — number (0 = disabled)
- `showCount` — boolean
- `variant` — 'plain'|'badge'|'dot'
- `size` — 'sm'|'md'|'lg'
- `preorderLabel` — string - label saat produk dalam mode pre-order
- `comingSoonLabel` — string - label sebelum jendela pre-order rilis dibuka
- `soldOutLabel` — string - label saat kuota pre-order event habis
- `showPreorderEta` — boolean - sambung estimasi kirim ke label saat pre-order
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `productSku`
Kode SKU produk — otomatis update saat varian dipilih.
Props:
- `prefix` — string (e.g. 'SKU:')
- `hideIfEmpty` — boolean
- `size` — 'sm'|'md'|'lg'
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `productSalePercent`
Badge diskon — "−25%" atau "Hemat Rp 50.000". Otomatis tersembunyi jika tidak sedang sale.
Props:
- `showAs` — 'percent'|'amount'|'both'
- `variant` — 'badge'|'pill'|'plain'
- `amountPrefix` — string
- `hideWhenNoSale` — boolean
- `size` — 'sm'|'md'|'lg'
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `productSalePrice`
Harga diskon saja — otomatis tersembunyi jika produk tidak sedang sale.
Props:
- `alignment` — 'left'|'center'|'right'
- `size` — 'sm'|'md'|'lg'|'xl'
- `hideWhenNoSale` — boolean
- `outOfStockLabel` — string (shown in place of price when the selected variant is sold out)
- `variantPriceDisplay` — 'auto'|'base' (auto = min–max range before selection; base = always base price)

#### `productRegularPrice`
Harga asli (sebelum diskon) — bisa dicoret otomatis saat produk sedang sale.
Props:
- `alignment` — 'left'|'center'|'right'
- `size` — 'sm'|'md'|'lg'|'xl'
- `strikethrough` — 'onSale'|'always'|'never'
- `hideWhenNoSale` — boolean
- `variantPriceDisplay` — 'auto'|'base' (auto = min–max range before selection; base = always base price)

#### `productCountdown`
Countdown sampai jadwal sale produk berakhir. Otomatis tersembunyi jika produk tidak punya sale aktif.
Props:
- `label` — string
- `variant` — 'compact'|'boxes'|'inline'
- `showDays` — boolean
- `onExpired` — 'hide'|'showText'
- `expiredText` — string
- `labelDays` — string
- `labelHours` — string
- `labelMinutes` — string
- `labelSeconds` — string
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `productShare`
Tombol share produk ke WhatsApp, Facebook, Twitter/X, Telegram, atau salin link.
Props:
- `label` — string
- `platforms` — Array<'whatsapp'|'facebook'|'twitter'|'copy'|'telegram'|'linkedin'>
- `variant` — 'icons'|'labeled'|'compact'
- `iconSize` — number (px)
- `shareText` — string template with {name} {url}
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `productWholesaleTable`
Tabel harga grosir per kuantitas. Otomatis update sesuai varian terpilih.
Props:
- `title` — string
- `layout` — 'table'|'cards'|'inline'
- `showSavings` — boolean
- `qtyFormat` — 'min+'|'min'
- `qtySuffix` — string (e.g. 'pcs')
- `hideWhenNoTiers` — boolean
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.

#### `pageTitle`
Judul halaman — terisi otomatis dari konten saat halaman dirender.
Props:
- `level` — 'h1'-'h6'
- `alignment` — 'left'|'center'|'right'

#### `pageContent`
Isi konten halaman — terisi otomatis dari konten saat halaman dirender.
Props:
- `plainText` — boolean

#### `pageFeaturedImage`
Gambar utama halaman — terisi otomatis dari konten.
Props:
- `aspectRatio` — 'auto'|'16:9'|'4:3'|'1:1'|'3:2'|'21:9'
- `fit` — 'cover'|'contain'
- `preset` — 'cardMedium'|'cardWide'|'hero'|'thumbnail'
- `fallbackBehavior` — select "hide"|"placeholder"|"image" — Jika gambar kosong — default: "hide"
- `fallbackImageUrl` — image — Gambar fallback

#### `courseTitle`
Nama course — terisi otomatis saat halaman dirender.
Props:
- `level` — 'h1'-'h6'
- `alignment` — 'left'|'center'|'right'

#### `courseDescription`
Deskripsi course — terisi otomatis dari konten.
Props:
- `plainText` — boolean

#### `courseImage`
Thumbnail course — terisi otomatis dari konten.
Props:
- `aspectRatio` — 'auto'|'16:9'|'4:3'|'1:1'|'3:2'
- `fit` — 'cover'|'contain'
- `preset` — 'cardMedium'|'cardWide'|'hero'|'thumbnail'

#### `coursePrice`
Harga kursus dari produk tertautnya — sadar diskon, gratis, dan belum tersedia.
Props:
- `freeLabel` — string — shown for public/free_enrollment courses
- `unavailableLabel` — string — shown when accessType is 'paid' but no active linked product sells it
- `showOriginalOnSale` — boolean — strikethrough original price next to the sale price
- `showDiscountBadge` — boolean — '-40%' pill
- `hideWhenEnrolled` — boolean — hide entirely once the viewer is enrolled
- `size` — 'sm'|'md'|'lg'|'xl'

#### `courseCurriculum`
Daftar modul & materi kursus langsung dari database, lengkap dengan status terkunci.
Props:
- `defaultExpanded` — 'all'|'first'|'none' — which sections start open
- `showLessonType` — boolean — per-lesson icon (video/text/file/quiz)
- `showDuration` — boolean — lesson duration mm:ss, hidden when absent
- `showLockState` — boolean — lock icon + muted styling on inaccessible lessons
- `showPreviewBadge` — boolean — 'Preview' pill on free-preview lessons
- `showLessonCount` — boolean — '{n} materi' next to the section title

#### `courseEnroll`
Tombol aksi kursus — menyesuaikan otomatis: mulai, lanjut, daftar gratis, beli, atau login.
Props:
- `startLabel` — string — public course
- `continueLabel` — string — already enrolled
- `enrollLabel` — string — free enrollment
- `buyLabel` — string — paid, logged in
- `loginLabel` — string — paid, logged out
- `unavailableLabel` — string — paid but no active linked product
- `pendingLabel` — string — shown while enrolment/checkout is in flight
- `size` — 'sm'|'md'|'lg'
- `fullWidth` — boolean

### basic
#### `heading`
Judul teks (H1 - H6)
Props:
- `text` — string — heading text (used when mode='plain')
- `level` — 'h1'|'h2'|'h3'|'h4'|'h5'|'h6' (default: 'h2')
- `mode` — 'plain'|'rich' (default: 'plain'). Rich enables inline HTML formatting per word.
- `alignment` — DEPRECATED legacy text-align — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new headings.
- `link` — optional URL string
- `richText` — optional inline-only HTML string (span/strong/em/u/s/a + style color). Used when mode='rich'. No block tags.

#### `basicText`
Paragraf teks polos tanpa toolbar
Props:
- `text` — string — plain text (newlines render as <br>)
- `tag` — 'div'|'p'|'span'|'figcaption'|'address'|'figure' (default: 'p')
- `link` — optional URL string — wraps text content as <a>
- `wordsLimit` — optional integer — trim text to N words
- `readMore` — optional string — appended after trimmed text when wordsLimit is set

#### `richText`
Konten teks dengan heading
Props:
- `body` — string — HTML content

#### `video`
Embed video YouTube, Vimeo, atau Bunny.net
Props:
- `url` — string — YouTube URL
- `aspectRatio` — '16/9'|'4/3'|'1/1' (default: '16/9')
- `title` — optional string

#### `image`
Gambar (URL atau dari Media Library)
Props:
- `src` — string — image URL or shortcode
- `shape` — customRenderer — Bentuk
- `aspectRatio` — optional 'auto'|'1:1'|'4:3'|'3:2'|'16:9' (default: 'auto') — crops image to a fixed ratio
- `fit` — optional 'cover'|'contain' (default: 'cover') — object-fit when aspectRatio is not 'auto'
- `linkType` — select "none"|"url"|"whatsapp" — Tipe Link — default: "none"
- `htmlTag` — select "none"|"figure"|"div"|"custom" — HTML Tag — default: "none"
- `metaTrackingEnabled` — checkbox — Aktifkan Meta Pixel — default: false
- `tiktokTrackingEnabled` — checkbox — Aktifkan TikTok Pixel — default: false
- `alt` — optional string — alt text
- `link` — optional URL string
- `mediaId` — optional string — media ID from R2
- `alignment` — optional 'left'|'center'|'right'

#### `button`
Tombol dengan link
Props:
- `text` — string — button label
- `link` — string — href URL (default: '#'). Used when linkType='url'.
- `linkType` — 'url' (default) | 'whatsapp' | 'checkout'. 'checkout' makes the button add the selected product to cart and go to /checkout.
- `whatsappNumber` — string — international format, no '+' (e.g. '6281234567890'). Used when linkType='whatsapp'.
- `whatsappMessage` — optional string — prefilled WhatsApp message. Used when linkType='whatsapp'.
- `metaTrackingEnabled` — checkbox — Aktifkan Meta Pixel — default: false
- `tiktokTrackingEnabled` — checkbox — Aktifkan TikTok Pixel — default: false
- `productId` — string — product UUID to buy. REQUIRED when linkType='checkout'. Picker also caches productSlug/productName/productPrice/productType.
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new buttons.
- `width` — DEPRECATED legacy — for sizing set style.layout.width ('fit-content' for Auto, '100%' for Full Width, or any length like '300px'/'20rem' for Custom). Pre-migration data only; do NOT seed on new buttons.
- `icon` — optional IconValue { library: 'lucide'|'fa-solid'|..., icon: string } — leave unset for no icon
- `iconPosition` — 'left'|'right' (default: 'right') — side of the text the icon sits on
- `iconGap` — optional unit string e.g. '8px' — spacing between icon and text
- `iconSize` — optional unit string e.g. '20px' (default 1em, follows button font-size)
- `metaEvent` — optional string — Meta Pixel standard event e.g. 'Lead', 'Purchase' (linkType='url'/'whatsapp' only; checkout mode auto-fires AddToCart)
- `tiktokEvent` — optional string — TikTok Pixel event (engagement mode only)

#### `textLink`
Teks dengan hyperlink
Props:
- `text` — string
- `link` — string — href URL
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new links.

#### `icon`
Tampilkan satu icon dengan opsi link, frame, atau background
Props:
- `icon` — IconValue object — see icon_value_format above
- `view` — 'default'|'stacked'|'framed'
- `shape` — 'circle'|'square'|'rounded'
- `link` — optional URL
- `linkTarget` — '_self'|'_blank'
- `primaryColor` — view-dependent → default: icon color • stacked: fill bg (icon glyph auto-contrast white) • framed: border + icon color. Empty = theme primary.
- `secondaryColor` — framed bg only — IGNORED in default & stacked views. For a stacked dot just set primaryColor (e.g. '#2563eb'); do NOT set primaryColor='#ffffff' + secondaryColor='#2563eb' (renders invisible: white-on-white).
- `size` — number (px)
- `rotate` — number (degrees)
- `borderWidth` — number (px, framed view)
- `padding` — number (px)
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new icons.
- `borderRadius` — number (px)

#### `divider`
Garis pemisah antar konten
Props:
- `height` — number — line thickness in px (default: 1)
- `width` — string — CSS width e.g. '100%' (default: '100%')
- `style` — 'solid'|'dashed'|'dotted'|'double' (default: 'solid')
- `direction` — 'horizontal'|'vertical' (default: 'horizontal')
- `alignment` — 'left'|'center'|'right' (default: 'center')
- `color` — CSS color (default: '#e5e5e5')
- `contentType` — customRenderer — Konten Tengah
- `space` — number — vertical spacing in px (default: 16)
- `icon` — optional Lucide icon name in center

#### `spacer`
Ruang kosong vertikal
Props:
- `height` — number — height in px on desktop (default: 48)
- `mobileHeight` — optional number — height on mobile

### general
#### `slider` · can have children
Carousel dengan panah & dot — tiap anak jadi slide
Props:
- `htmlTag` — string — (undocumented)
- `layoutMode` — string — (undocumented)
- `perPage` — number — Slides / view (Desktop) — default: 4
- `perPageTablet` — number — Slides / view (Tablet) — default: 2
- `perPageMobile` — number — Slides / view (Mobile) — default: 1
- `gap` — unit — Gap — default: "24px"
- `arrows` — checkbox — Tampilkan panah — default: true
- `arrowsPosition` — radio "inside"|"outside" — Posisi — default: "inside"
- `pagination` — checkbox — Tampilkan dot — default: true
- `sliderType` — select "slide"|"loop"|"fade" — Tipe — default: "slide"
- `autoplay` — checkbox — Autoplay — default: false
- `interval` — number — Interval (ms) — default: 3000
- `speed` — number — Kecepatan transisi (ms) — default: 400
- `drag` — checkbox — Drag mouse/sentuh — default: true
- `pauseOnHover` — checkbox — Pause saat hover — default: true
- `arrowState` — radio "normal"|"hover" — default: "normal"
- `arrowSize` — number — Ukuran tombol (px) — default: 40
- `arrowIconSize` — number — Ukuran ikon (px) — default: 16
- `arrowRadius` — unit — Radius (0 = persegi) — default: "9999px"
- `arrowShadow` — select "none"|"soft"|"medium" — Shadow — default: "soft"
- `arrowBg` — color — Background — default: "#ffffff"
- `arrowIconColor` — color — Warna ikon — default: "#111827"
- `arrowBorderWidth` — number — Border (px) — default: 1
- `arrowBorderColor` — color — Warna border — default: "rgba(0,0,0,0.08)"
- `arrowBgHover` — color — Background
- `arrowIconColorHover` — color — Warna ikon
- `arrowBorderColorHover` — color — Warna border
- `dotState` — radio "normal"|"active" — default: "normal"
- `dotSize` — number — Ukuran (px) — default: 8
- `dotGap` — number — Jarak antar dot (px) — default: 8
- `dotRadius` — unit — Radius (0 = persegi) — default: "9999px"
- `dotColor` — color — Warna — default: "rgba(0,0,0,0.2)"
- `dotColorHover` — color — Warna :hover
- `dotActiveColor` — color — Warna aktif — default: "rgba(0,0,0,0.7)"
- `dotActiveScale` — number — Skala aktif — default: 1.2

#### `logo`
Logo situs — auto dari Settings, atau image/text kustom
Props:
- `sourceMode` — optional 'auto'|'image'|'text' (default: 'auto')
- `linkType` — optional 'home'|'url'|'none' (default: 'home')
- `loading` — optional 'eager'|'lazy' (default: 'eager')
- `src` — optional string — image URL when sourceMode='image'
- `mediaId` — optional string — media ID from R2
- `alt` — optional string — alt text for the logo image
- `text` — optional string — text logo, or fallback when auto-mode has no tenant logo
- `inverseSrc` — optional URL — inverse logo shown on scrolled headers
- `inverseMediaId` — optional string
- `height` — optional string e.g. '40px' — required for SVG sources
- `width` — optional string e.g. '120px' — required for SVG sources
- `link` — optional URL — used when linkType='url'

#### `accordion` · children: accordionItem only
Konten expandable dengan pertanyaan & jawaban
Props:
- `titleTag` — 'div'|'h1'..'h6' (default: 'h3') — HTML tag for each panel title, shared
- `icon` — IconValue — toggle icon shown COLLAPSED (shared across items)
- `iconExpanded` — IconValue — toggle icon shown EXPANDED (shared)
- `iconPosition` — 'left'|'right' (default: 'right')
- `independentToggle` — boolean — allow multiple panels open at once (default: false)
- `transition` — number — open/close transition in ms (default: 200)
- `faqSchema` — boolean — emit FAQPage JSON-LD (default: false)
- `iconRotate` — number — degrees to rotate the icon when expanded (optional)

#### `breadcrumb`
Trail navigasi: Home > Section > Page (auto JSON-LD)
Props:
- `dataSource` — select "auto"|"manual" — Sumber Data
- `items` — BreadcrumbItem[] — each: { id, label, url } (1-10 items)
- `separator` — 'slash'|'arrow'|'chevron'|'dot' (default: 'chevron')
- `showHomeIcon` — boolean — show Home icon on first item (default: true)
- `homeUrl` — string — URL for home link (default: '/')
- `homeLabel` — text — Label Home
- `showBlogArchive` — checkbox — Sertakan langkah arsip Blog
- `showCatalog` — checkbox — Sertakan langkah Katalog
- `showCategory` — checkbox — Sertakan kategori post/product
- `hideCurrentItem` — checkbox — Sembunyikan halaman saat ini
- `color` — string — link color (CSS)
- `activeColor` — string — last item (current page) color
- `separatorColor` — string — separator char color

#### `counter`
Angka statistik dengan animasi count-up saat masuk viewport
Props:
- `countFrom` — number — Mulai Dari
- `countTo` — number — Sampai
- `duration` — number — Durasi Animasi (ms)
- `prefix` — optional string e.g. 'Rp'
- `suffix` — optional string e.g. '+'
- `thousandSeparator` — checkbox — Tampilkan separator ribuan
- `separatorText` — text — Karakter Separator
- `count` — number
- `label` — string
- `alignment` — 'left'|'center'|'right' (default: 'center')

#### `iconList` · children: iconListItem only
Daftar item (Item List) dengan icon, title, deskripsi & highlight badge

#### `countdownTimer`
Hitung mundur menuju tanggal & waktu tertentu
Props:
- `mode` — 'fixed'|'evergreen' (default: 'fixed'). 'fixed' counts down to targetDate; 'evergreen' gives each visitor their own countdown of evergreenSeconds, resumed across refreshes via localStorage
- `targetDate` — string — datetime-local format e.g. '2026-12-31T23:59' (mode='fixed')
- `evergreenSeconds` — number — per-visitor countdown length in seconds (default: 1200 = 20 minutes, mode='evergreen')
- `evergreenOnEnd` — 'restart'|'expire' (default: 'restart') — loop into a new cycle, or stay on expiredText (mode='evergreen')
- `showDays` — boolean (default: true)
- `showHours` — boolean (default: true)
- `showMinutes` — boolean (default: true)
- `showSeconds` — boolean (default: true)
- `expiredText` — string (default: 'Penawaran telah berakhir')
- `layout` — 'boxes'|'minimal' (default: 'boxes')
- `alignment` — 'left'|'center'|'right' (default: 'center')
- `showLabels` — boolean (default: true)
- `labelPosition` — 'above'|'below' (default: 'below')
- `labelPlacement` — select "outside"|"inside" — Penempatan Label
- `separator` — select "none"|"dash"|"colon"|"slash" — Separator
- `boxBg` — CSS color (default: '#f3f4f6')
- `boxBorderColor` — CSS color (default: '#e5e7eb')
- `boxBorderRadius` — CSS string (default: '8px')

#### `alertBanner`
Kotak notifikasi atau pengumuman (info/success/warning/error)
Props:
- `title` — optional string
- `message` — string — main message
- `variant` — 'info'|'success'|'warning'|'error' (default: 'info')
- `showIcon` — boolean (default: true)
- `isDismissible` — boolean (default: false)
- `alignment` — 'left'|'center'|'right' (default: 'left')

#### `mapEmbed`
Embed Google Maps untuk lokasi toko
Props:
- `embedUrl` — string — location keyword/address, coords, any Google Maps URL, embed URL, <iframe> tag, or maps.app.goo.gl short link
- `zoom` — number 1–21 (default: 14)
- `mapType` — 'roadmap' | 'satellite' (default: 'roadmap') — keyless embed only supports these two; terrain/hybrid need a paid API key
- `height` — string e.g. '400px'
- `borderRadius` — string e.g. '12px'
- `allowFullscreen` — boolean

#### `searchBar`
Form pencarian — inline, overlay, atau icon expand.
Props:
- `displayMode` — 'input'|'overlay'|'inlineReveal' (default: 'input')
- `actionUrl` — string — form action URL (default: '/search')
- `additionalParams` — Array<{ id, key, value }> — hidden inputs added to form (e.g. scope to category)
- `placeholder` — string (default: 'Cari produk, artikel, kursus...')
- `showLabel` — boolean — show input label visibly (default: false = screen-reader-only)
- `labelText` — string (default: 'Pencarian')
- `buttonText` — string — empty = icon-only submit (input mode only)
- `submitIcon` — string — Lucide icon name (default: 'Search')
- `buttonAriaLabel` — string (default: 'Cari')
- `toggleIcon` — string — Lucide icon for overlay/inlineReveal toggle (default: 'Search')
- `toggleAriaLabel` — string (default: 'Buka pencarian')
- `overlayTitle` — string — only used in overlay mode (default: 'Cari di situs ini')
- `overlayTitleTag` — 'div'|'h1'-'h6' (default: 'h4')
- `overlayCloseAriaLabel` — string (default: 'Tutup pencarian')

#### `menu` · children: menuZone / brand / menuItemsGroup / menuActionsGroup / menuItem / menuAction only
Header all-in-one: logo, items dengan dropdown/mega, plus tombol Login/Register/Account/Cart
Props:
- `brand` — object — (undocumented)
- `items` — DEPRECATED — legacy MenuItem[] kept only for old saved pages. Emit `menuItem` CHILD ELEMENTS instead.
- `actions` — object — (undocumented)
- `actionsOrder` — array — (undocumented)
- `bar` — object — (undocumented)
- `styleSimple` — object — (undocumented)
- `styleMode` — string — (undocumented)
- `actionsStyle` — object — (undocumented)
- `styling` — {"level1":"MenuLevelStyle — top-level items","submenu":"MenuLevelStyle — items inside dropdowns","dropdown":"{ bg, borderRadius, shadow, padding, minWidth } — dropdown container chrome"}
- `desktop` — {"layout":"'horizontal'|'vertical' (default: 'horizontal')","alignment":"'left'|'center'|'right'|'stretch' (default: 'left')","gap":"CSS string (default: '8px')"}
- `mobile` — {"breakpoint":"CSS string e.g. '768px' (default: '768px')","mode":"'hamburger'|'inline' (default: 'hamburger')","alignment":"'left'|'center'|'right' (default: 'left')","gap":"CSS string (default: '0px')","hamburger":"{ label, color, bg, borderRadius }"}
- `dropdown` — {"openOn":"'hover'|'click' (default: 'hover')","animation":"'fade'|'slideDown'|'none' (default: 'fade')","animationDuration":"number ms (default: 200)","hoverDelay":"number ms (default: 120)"}

#### `htmlEmbed`
Embed kode HTML kustom atau dari AI
Props:
- `html` — string — embed code

#### `cart`
Icon keranjang + panel cart slide-in (off-canvas kanan)
Props:
- `icon` — { library, icon }
- `iconSize` — string (px)
- `triggerColor` — string
- `triggerLabel` — optional string
- `countVisibility` — 'auto'|'always'|'hidden'
- `countBg` — string — (undocumented)
- `countColor` — string — (undocumented)
- `countSize` — string — (undocumented)
- `countFontSize` — string — (undocumented)
- `countOffsetTop` — string — (undocumented)
- `countOffsetRight` — string — (undocumented)
- `subtotalPosition` — 'none'|'left'|'right'
- `subtotalGap` — string — (undocumented)
- `subtotalFontSize` — string — (undocumented)
- `subtotalColor` — string — (undocumented)
- `hideCartDetails` — boolean — true = direct nav to /cart, false = slide-in panel
- `panelWidth` — string (px)
- `panelBg` — string — (undocumented)
- `panelPadding` — string — (undocumented)
- `panelTitle` — string — (undocumented)
- `panelItemFontSize` — string — (undocumented)
- `panelItemColor` — string — (undocumented)
- `panelMutedColor` — string — (undocumented)
- `panelQuantityFontSize` — string — (undocumented)
- `panelImageWidth` — string — (undocumented)
- `panelDividerColor` — string — (undocumented)
- `panelButtonBg` — string — (undocumented)
- `panelButtonColor` — string — (undocumented)
- `panelButtonBorderRadius` — string — (undocumented)
- `panelButtonFontSize` — string — (undocumented)
- `panelCheckoutLabel` — string — (undocumented)
- `panelViewCartLabel` — string — (undocumented)
- `panelShowViewCart` — boolean — (undocumented)
- `panelShowShippingDiscountProgress` — boolean — (undocumented)
- `panelCloseIcon` — object — (undocumented)
- `panelEmptyText` — string — (undocumented)

#### `miniCheckout`
Checkout compact 1 produk/bundle di landing page
Props:
- `selectedType` — 'product'|'bundle' — type of item selected
- `selectedId` — string — UUID of the product or bundle
- `selectedName` — string — cached name for display
- `selectedThumbnailUrl` — optional URL string
- `showPreview` — boolean (default: true) — show product preview block
- `previewShowTitle` — boolean (default: true)
- `previewShowImage` — boolean (default: true)
- `previewShowPrice` — boolean (default: true)
- `previewShowDescription` — boolean (default: false)
- `showQuantity` — boolean (default: false) — show qty stepper; false = fixed qty 1
- `outOfStockMessage` — string (default: 'Stok habis')
- `requireLogin` — boolean (default: false) — force login before checkout
- `showNameField` — boolean (default: true) — only applies when requireLogin=false
- `showPhoneField` — boolean (default: true) — only applies when requireLogin=false
- `enableCoupon` — boolean (default: true)
- `showPaymentMethods` — boolean (default: true) — show payment method selector
- `showSummary` — boolean (default: true) — show subtotal & total summary block
- `showOrderBump` — boolean (default: true) — show eligible order bump offers (from Promotions > Order Bump) as tick-to-add upsells; adds them as separate order lines
- `buttonText` — string (default: 'Bayar Sekarang')
- `buttonSize` — 'sm'|'md'|'lg' (default: 'md')
- `buttonBgColor` — optional CSS color — overrides default primary color
- `buttonTextColor` — optional CSS color — overrides default white
- `width` — select "full"|"normal"|"narrow" — Lebar
- `enableTerms` — boolean (default: false)
- `termsUrl` — optional URL string
- `privacyUrl` — optional URL string
- `successAction` — 'default'|'custom_url'|'inline'|'whatsapp' (default: 'default')
- `successCustomUrl` — string — used when successAction='custom_url'
- `successInlineMessage` — string — used when successAction='inline'
- `successWhatsappNumber` — string — phone without + prefix, used when successAction='whatsapp'
- `successWhatsappTemplate` — string — supports {{order_number}}, {{customer_name}}, {{total}}, {{product_name}}
- `trackMetaPixel` — boolean (default: true)
- `trackMetaPixelId` — optional string — override site default Meta Pixel
- `trackTiktokPixel` — boolean (default: true)
- `trackTiktokPixelId` — optional string — override site default TikTok Pixel
- `selectedPrice` — undefined — (undocumented)

#### `accordionItem` · can have children
Satu panel di dalam Accordion — punya judul + konten nested (drop zone)
Props:
- `title` — string — panel header text
- `defaultOpen` — boolean — expand this panel on load (default: false)
- `subtitle` — string — optional secondary line under the title
- `anchorId` — string — optional DOM id for #hash deep-linking

#### `iconListItem`
Satu item di dalam Icon List — punya icon, title, deskripsi & style lengkap
Props:
- `icon` — IconValue (Lucide) — e.g. { library: "lucide", icon: "Check" }
- `title` — string — item text (supports {dynamic} tags)
- `highlight` — boolean (default false) — show a badge
- `titleTag` — 'span'|'p'|'h2'|'h3'|'h4'|'h5'|'h6' (default 'span')
- `iconAfterTitle` — boolean (default false) — render icon after the title
- `description` — string? — optional secondary line
- `highlightLabel` — string? — badge text (when highlight=true)

#### `brand`
Logo / nama brand di dalam Navigation
Props:
- `mode` — select "text"|"image"|"both" — Tampilan — default: "text"
- `text` — text — Teks brand
- `tagline` — text — Tagline (opsional)
- `imageUrl` — image — Logo
- `imageDarkUrl` — image — Logo (dark mode, opsional)
- `height` — text — Tinggi logo
- `link` — object — (undocumented)

#### `menuItem` · children: menuItem / customMega only
Satu item navigasi di dalam Navigation (bisa submenu / mega)
Props:
- `label` — text — Label
- `link` — object — (undocumented)

#### `customMega` · can have children
Dropdown mega berisi element bebas, di dalam sebuah Menu Item

#### `menuAction`
Satu action header (login / cart / search / dll) di dalam Navigation
Props:
- `kind` — select "login"|"register"|"account"|"cart"|"search" — Jenis
- `label` — text — Label
- `icon` — icon — Ikon
- `style` — select "link"|"button"|"icon" — Tampilan
- `link` — object — (undocumented)

### ecommerce
#### `productImageGallery`
Galeri foto produk (Featured + Gallery)
Props:
- `featuredImageSrc` — string — shortcode or URL (use '{product_image}' for templates)
- `galleryImagesSrc` — string — shortcode or JSON array (use '{product_gallery_images}' for templates)
- `thumbnailPosition` — 'left'|'bottom' (default: 'bottom')
- `showBorder` — boolean (default: true)
- `borderColor` — CSS color (default: '#e5e5e5')
- `borderWidth` — CSS string (default: '1px')
- `radius` — CSS string (default: '0px')
- `enableZoom` — boolean (default: true)

#### `cartItems`
Daftar item keranjang dengan ubah jumlah & hapus
Props:
- `showImage` — boolean (default: true)
- `showVariant` — boolean (default: true)
- `showWeight` — boolean (default: false)
- `editableQuantity` — boolean (default: true) — qty steppers
- `showRemove` — boolean (default: true) — remove button
- `emptyText` — optional string (default: 'Keranjang kamu masih kosong.')

#### `cartSummary`
Subtotal keranjang + tombol lanjut ke checkout
Props:
- `title` — optional string (default: 'Ringkasan Belanja')
- `showItemCount` — boolean (default: true)
- `showSubtotal` — boolean (default: true)
- `showShippingDiscountProgress` — checkbox — Tampilkan Progres Potongan Ongkir
- `checkoutLabel` — string (default: 'Lanjut ke Checkout')
- `checkoutUrl` — string (default: '/checkout')
- `showContinueShopping` — boolean (default: true)
- `continueShoppingLabel` — optional string (default: 'Lanjut Belanja')
- `continueShoppingUrl` — optional string (default: '/')
- `noteText` — optional string (default: 'Ongkir & pajak dihitung saat checkout.')

### forms
#### `nameField`
Input nama lengkap
Props:
- `fieldIdentifier` — string (snake_case storage key)
- `label` — string
- `placeholder` — string
- `required` — boolean
- `showLabel` — boolean

#### `emailField`
Input email address
Props:
- `fieldIdentifier` — string (snake_case storage key)
- `label` — string
- `placeholder` — string
- `required` — boolean
- `helperText` — string
- `showLabel` — boolean

#### `phoneField`
Nomor telepon atau WhatsApp
Props:
- `fieldIdentifier` — string (snake_case storage key)
- `label` — string
- `placeholder` — string
- `required` — boolean
- `helperText` — string
- `showLabel` — boolean

#### `textareaField`
Input teks panjang
Props:
- `fieldIdentifier` — string (snake_case storage key)
- `label` — string
- `placeholder` — string
- `required` — boolean
- `rows` — number
- `showLabel` — boolean

#### `selectField`
Pilihan dari daftar opsi
Props:
- `fieldIdentifier` — string (snake_case storage key)
- `label` — string
- `placeholder` — string
- `required` — boolean
- `options` — string[]
- `showLabel` — boolean

#### `checkboxField`
Centang persetujuan
Props:
- `fieldIdentifier` — string (snake_case storage key)
- `label` — string
- `required` — boolean
- `linkText` — string
- `linkUrl` — string

#### `customHtml`
Raw HTML block
Props:
- `html` — string — raw HTML

#### `submitButton`
Tombol submit formulir
Props:
- `text` — string
- `metaTrackingEnabled` — checkbox — Aktifkan Meta Pixel — default: false
- `tiktokTrackingEnabled` — checkbox — Aktifkan TikTok Pixel — default: false
- `alignment` — DEPRECATED legacy — for positioning set style.layout.alignSelf ('Align Self': flex-start|center|flex-end|stretch). Pre-migration data only; do NOT seed on new elements.
- `width` — DEPRECATED legacy — for sizing set style.layout.width ('fit-content' for Auto, '100%' for Full, or any length for Custom). Defaults to Full. Pre-migration data only; do NOT seed on new elements.


## Template types — what belongs where

Pick the template type that matches the request. Dynamic elements (productTitle, postContent, …) only resolve inside their compatible template (or a query loop on that source). `home` = a landing page; `single_page` = a generic page.

### `home` — Halaman utama / landing site. Hero + features + recent/featured products/posts/courses + CTA. Aktif sebagai default landing saat tenant belum punya page dengan isHomepage=true.
- **Required:** section
- **Recommended:** heading, basicText, richText, image, button, iconList, section, container, block
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postContent, productDescription, productVariants, productPlans, productQuantity, productCustomerNote, productSku, productCountdown, productShare, productWholesaleTable, pageContent, pageFeaturedImage, courseDescription, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section[hero] > container > [heading(h1), basicText, button] | section[features] > container > [container(grid) > block × 3 (icon + heading + basicText)] | section[products] > container > [container(grid) > block[queryLoop dataSource=products, card] > [productImage, productTitle, productPrice]] | section[cta] > container > [heading, button]
- Notes: Landing experience untuk tenant. Wajib include hero — heading (h1) + supporting text + 1-2 CTA buttons. Untuk "recent / featured products / posts / courses": pakai container(grid) > block dengan queryLoop (dataSource=products|posts|courses) sebagai card yang di-repeat. Di dalam card pakai dynamic loop-safe element (productImage/productTitle/productPrice, postFeaturedImage/postTitle/postExcerpt, courseImage/courseTitle) ATAU primitive + entity tag ({product_*}/{post_*}/{course_*}). JANGAN pakai productGrid/courseGrid (deprecated). Dynamic single-entity element (addToCartButton, productVariants, productQuantity, productDescription, postContent, dll) TIDAK boleh di home — homepage tidak punya entity tunggal; itu hanya untuk single_* template. Bisa mix: hero + features + featured products + CTA band. Stack 3-5 sections. `{site_name}` shortcode resolves ke nama tenant — gunakan untuk welcome heading. Tenant page dengan isHomepage=true akan override template ini — design dengan asumsi "branded fallback".

### `single_post` — Halaman detail satu post blog dengan judul, gambar utama, meta info, dan isi konten.
- **Required:** postTitle, postContent
- **Recommended:** postFeaturedImage, postMeta, section, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<article>` · Typical structure: section[article] > container[max-width:720px] > [postMeta, postTitle, postFeaturedImage, postContent]
- Notes: Editorial single-column layout 600-720px optimal untuk reading. PostMeta biasanya di atas title (small uppercase) atau di bawah title (caption). Tidak ada nav element — header/footer di-handle terpisah via PAGE_TEMPLATE_TYPES locked areas. Post tanpa featured image: jaga blok gambarnya dengan Display Condition tipe "dynamic_field" ({ type: "dynamic_field", tag: "{post_featured_image}", operator: "!empty" }) di elemen PEMBUNGKUS — element image sendiri memang tidak render saat src kosong, tapi block/container-nya tetap makan padding.

### `single_page` — Halaman landing/about/policy custom yang bukan post/product/course. Layout fleksibel — bisa hero, feature grid, CTA, dll.
- **Required:** pageTitle
- **Recommended:** pageContent, section, container, block, heading, basicText, button, image
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section > container > [pageTitle, ...flexible blocks]
- Notes: Paling fleksibel di antara semua content templates — landing page biasanya stack hero + features + CTA. PageFeaturedImage opsional, sering tidak dipakai untuk landing-style page. Form field elements hanya valid di dalam Form Builder, bukan di Single Page builder.

### `single_course` — Halaman detail satu course dengan judul, deskripsi, instruktur, daftar pelajaran, dan tombol enroll.
- **Required:** courseTitle
- **Recommended:** courseDescription, courseImage, courseCurriculum, coursePrice, courseEnroll, section, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section > container (style.layout.display=grid, gridTemplateColumns='2fr 1fr', gap=32px) > [block (main): courseTitle/courseDescription/courseCurriculum, block (aside): courseImage/coursePrice/courseEnroll]
- Notes: Course detail biasanya pakai layout 2-kolom: konten utama di kiri, sticky enroll card di kanan. courseEnroll menangani SEMUA jalur CTA sendiri (public / sudah terdaftar / gratis / beli / login) — jangan ganti dengan button biasa, karena tombol biasa tidak bisa mendaftarkan atau memasukkan produk tertaut ke keranjang. CurriculumList membaca course_sections + course_lessons dari DB; user tidak perlu isi manual.

### `post_archive` — Halaman daftar/index post blog. Biasanya Query Loop section yang iterasi post terbaru.
- **Required:** section
- **Recommended:** heading, basicText, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postContent, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section > container[display:grid] > block[queryLoop: posts, card-template] > [postFeaturedImage, postTitle, postMeta, postExcerpt]
- Notes: Repeat-self queryLoop: queryLoop sits on the BLOCK that IS the card template. Block (with queryLoop) gets repeated N times — each iteration is a full card. Container is the grid wrapper (display:grid + gridTemplateColumns) but does NOT have queryLoop. Post-* element di dalam block ber-iterate per item — tidak butuh manual repeat. PostContent (full body) tidak masuk akal di archive — pakai PostExcerpt.

### `post_category` — Halaman arsip satu kategori blog — daftar post dalam kategori yang sedang dibuka. Sama seperti post_archive, tapi Query Loop otomatis ter-scope ke kategori tsb.
- **Required:** section
- **Recommended:** heading, basicText, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postContent, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section[header] > container > [heading "{category_name}", basicText "{category_description}"] | section > container[display:grid] > block[queryLoop: posts, card-template] > [postFeaturedImage, postTitle, postMeta, postExcerpt]
- Notes: Identik dengan post_archive, TAPI Query Loop dataSource=posts otomatis difilter ke kategori arsip yang sedang dibuka (archiveScope) — JANGAN set filter kategori manual. Judul arsip: pakai shortcode {category_name} di heading + {category_description} / {category_count} untuk sub-teks. Ini deskripsi TERM kategori, bukan dynamic post element (post_* dynamic hanya valid di dalam Query Loop). PostContent (full body) tidak masuk akal di archive — pakai PostExcerpt.

### `course_archive` — Halaman daftar/index course. Query Loop atau Course Grid element yang fetch all courses.
- **Required:** section
- **Recommended:** heading, basicText, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseDescription, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section > container > [heading "Courses", courseGrid] OR section > container[display:grid] > block[queryLoop: courses, card-template] > [courseImage, courseTitle]
- Notes: CourseGrid element adalah shortcut — render grid courses dengan default styling. Atau pakai section+queryLoop untuk control penuh. CourseDescription (full description) tidak masuk akal di archive — biasanya cukup title + price.

### `shop_catalog` — Halaman katalog/shop yang menampilkan grid produk. ProductGrid element biasa, atau Query Loop custom.
- **Required:** section
- **Recommended:** productTitle, productPrice, productImage, productStock, productSalePercent, productSalePrice, productRegularPrice, heading, basicText, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productDescription, productVariants, productPlans, productQuantity, productCustomerNote, productSku, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section > container > [heading "Catalog", productGrid] OR section > container[display:grid] > block[queryLoop: products, card-template] > [productImage, productTitle, productPrice]
- Notes: ProductGrid shortcut: tampilkan grid produk dengan default. Atau pakai section+queryLoop untuk layout custom. ProductDescription (full HTML body) tidak masuk akal di archive — terlalu panjang. ProductImageGallery hanya untuk single_product — di archive cukup ProductImage (single thumb).

### `product_category` — Halaman arsip satu kategori produk — grid produk dalam kategori yang sedang dibuka. Sama seperti shop_catalog, tapi Query Loop otomatis ter-scope ke kategori tsb.
- **Required:** section
- **Recommended:** productTitle, productPrice, productImage, productStock, productSalePercent, productSalePrice, productRegularPrice, heading, basicText, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productDescription, productVariants, productPlans, productQuantity, productCustomerNote, productSku, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section[header] > container > [heading "{category_name}", basicText "{category_description}"] | section > container[display:grid] > block[queryLoop: products, card-template] > [productImage, productTitle, productPrice]
- Notes: Identik dengan shop_catalog, TAPI Query Loop dataSource=products otomatis difilter ke kategori arsip yang sedang dibuka (archiveScope) — JANGAN set filter kategori manual. Judul arsip: pakai shortcode {category_name} di heading + {category_description} / {category_count} untuk sub-teks. Mekanisme daftar produk = section + block[queryLoop: products]. Hanya queryLoop yang auto-scope ke kategori; ProductGrid element TIDAK auto-scope (pakai categoryId prop sendiri). ProductDescription (full HTML) & ProductImageGallery tidak untuk archive.

### `single_product` — Halaman detail satu produk dengan gambar, nama, harga, deskripsi, varian, quantity, add-to-cart, dan opsional countdown/share/wholesale.
- **Required:** productTitle, productPrice
- **Recommended:** productImageGallery, productImage, productDescription, productVariants, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, button, miniCheckout, section, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section > container (style.layout.display=grid, gridTemplateColumns='1fr 1fr', gap=40px) > [block (gallery): productImageGallery, block (info): productTitle/Price/Description/Button(linkType='checkout')]
- Notes: Layout standar 2-kolom: gambar kiri, info+CTA kanan. ProductImageGallery (multi image) lebih disarankan daripada ProductImage (single) untuk single_product. Button dengan linkType='checkout' menambah ke cart + redirect /checkout. MiniCheckout = inline 1-product checkout (alternatif). Jangan campur checkoutForm/Payment/etc di sini — itu untuk template checkout.

### `single_bundle` — Halaman detail satu bundle (paket beberapa produk dengan harga khusus). Mirip single_product tapi untuk bundle.
- **Required:** productTitle, productPrice
- **Recommended:** productImage, productDescription, button, miniCheckout, section, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productPlans, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: mirip single_product tapi biasanya tidak pakai gallery (bundle = 1 image overview)
- Notes: Bundle = paket 2+ produk. UI rendering pakai shape product yang sama (productTitle/Price/Description). ProductImageGallery jarang relevan di bundle — biasanya 1 hero image overview. List komponen bundle (produk-produk di dalamnya) bisa di-render manual via static list/iconList, ATAU custom logic kalau ada element bundle-list (belum ada per sekarang).

### `cart` — Halaman keranjang (/cart): visitor review item yang sudah ditambahkan, ubah qty, hapus item, lalu lanjut ke checkout. Singleton page (tidak per-entity).
- **Recommended:** cartItems, cartSummary, heading, basicText, section, container
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, miniCheckout, productImageGallery, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton, searchBar, menu, countdownTimer
- Root: `<main>` · Typical structure: section > container (style.layout.display=grid, gridTemplateColumns='2fr 1fr', gap=32px) > [block (main): cartItems, block (aside): cartSummary]
- Notes: Cart adalah singleton page — tidak ada per-entity condition; satu template berlaku untuk seluruh site. cartItems = daftar item keranjang dengan stepper qty + hapus; cartSummary = subtotal + tombol Lanjut ke Checkout. Keduanya baca cart store langsung (tanpa provider). Default CartView dipakai sebagai fallback bila template kosong. cartSummary.checkoutUrl default ke /checkout.

### `checkout` — Halaman transaksional 1-langkah: visitor isi alamat, pilih shipping, pilih payment, submit order. Fokus konversi maksimal.
- **Required:** checkoutMessages
- **Recommended:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, heading, basicText, section, container
- **Forbidden:** postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, miniCheckout, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton, searchBar, menu, countdownTimer
- Root: `<main>` · Typical structure: section > container (style.layout.display=grid, gridTemplateColumns='2fr 1fr', gap=32px) > [block (main): checkoutItems+checkoutShipping, block (sidebar): checkoutPayment]
- Notes: checkoutMessages WAJIB ada di setiap template checkout — satu-satunya tempat pesan penolakan order tampil ke pembeli. Taruh tepat sebelum elemen submit. Tanpa itu seluruh halaman diganti tampilan bawaan Alusio. AI cannot fully author a checkout yet: the checkoutForm/checkoutSummary composites are deprecated and their atomic replacements (checkoutAddress/Totals/PayButton/Field/Coupon/OrderBump) are not yet AI-exposed. The available atoms (checkoutItems/Shipping/Payment) alone cannot form a submittable checkout — do NOT generate a checkout template from scratch; it is assembled manually from the palette. Hanya boleh ada satu form path — submit ke order creation. Tidak boleh ada link keluar yang interfere dengan konversi. Button linkType='checkout' dan MiniCheckout TIDAK cocok di sini — itu untuk halaman lain yang trigger menuju ke checkout. Trust badges (icon list with security/verified) boleh (reduce friction philosophy). Sticky summary + payment di mobile direkomendasikan via style.layout.position=sticky.

### `header` — Header bar global yang muncul di top setiap halaman site. Brand + navigasi + CTA + cart icon.
- **Required:** section
- **Recommended:** container, block, heading, image, textLink, button, menu, searchBar, cart
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton, accordion, iconList
- Root: `<header>` · Typical structure: section[header] > container > block[flex row, space-between] > [logo image, menu OR textLinks, button CTA]
- Notes: Header WAJIB compact — tinggi 56-80px. Tidak boleh ada section penuh konten di sini. `{site_name}` dan `{site_logo}` shortcodes resolve ke tenant settings. Header sticky biasanya di-handle di site layout root, bukan di-set di builder. Cart icon: pakai element `cart` — icon keranjang + badge count + slide-in panel (off-canvas kanan). Set `hideCartDetails: true` jika ingin langsung navigate ke /cart tanpa panel.

### `footer` — Footer global yang muncul di bottom setiap halaman site. Brand + link columns + copyright.
- **Required:** section
- **Recommended:** container, block, heading, basicText, textLink, menu, divider, image
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postTitle, postContent, postFeaturedImage, postExcerpt, postMeta, productTitle, productPrice, productDescription, productImage, productVariants, productPlans, productQuantity, productCustomerNote, addToCartButton, productStock, productSku, productSalePercent, productSalePrice, productRegularPrice, productCountdown, productShare, productWholesaleTable, pageTitle, pageContent, pageFeaturedImage, courseTitle, courseDescription, courseImage, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton, accordion, countdownTimer
- Root: `<footer>` · Typical structure: section[footer] > container > [block[brand row], block[link columns row of block[heading + menu(vertical)]], divider, block[copyright+socialIcons]]
- Notes: Footer biasanya 3-5 column link list: Product/Company/Resources/Legal. Pakai `menu` element (desktop.layout="vertical", mobile.mode="inline") untuk setiap link column — lebih maintainable daripada manual textLink list. Pair dengan heading kecil di atasnya untuk label kolom. Background dark common — pastikan link text color contrast cukup. `{site_year}` shortcode untuk copyright. `{site_name}` untuk brand. SocialIcons element untuk row Twitter/Instagram/etc.

### `search` — Halaman hasil pencarian (/search). Search bar + judul "{search_query}" + beberapa Query Loop (produk/post/course/pages) yang otomatis ter-scope ke hasil pencarian, plus state kosong (belum mencari / tidak ada hasil).
- **Required:** section
- **Recommended:** searchBar, heading, basicText, container, block, productTitle, productPrice, productImage, postTitle, postFeaturedImage, postExcerpt, courseTitle, courseImage, pageTitle
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postContent, productDescription, productVariants, productPlans, productQuantity, productCustomerNote, productSku, productCountdown, productShare, productWholesaleTable, pageContent, pageFeaturedImage, courseDescription, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section > container > [searchBar, heading "{search_query}" ({search_count})] | block[displayCondition: no_query] "Mulai cari…" | block[displayCondition: no_results] "Tidak ditemukan" | section[displayCondition: has_results] > [block[queryLoop: products] > productImage/productTitle/productPrice, block[queryLoop: posts] > postFeaturedImage/postTitle, block[queryLoop: courses], block[queryLoop: pages] > pageTitle]
- Notes: Tiap Query Loop (dataSource products/posts/courses/pages) otomatis difilter ke hasil pencarian saat ini (archiveScope) — JANGAN set filter manual. Hasil per tipe terpisah: satu loop per tipe. State kosong pakai Display Condition tipe "search": operator no_query (belum mengetik), has_query, has_results (tampilkan blok hasil), no_results (tampilkan pesan "tidak ditemukan"). Section berjudul yang isinya query loop WAJIB dijaga Display Condition tipe "collection_has_items" (collection: products|posts|courses|bundles|product_categories, operator gte/lt, count). Loop tanpa hasil tidak render apa-apa, tapi section pembungkusnya tetap emit heading + padding — pasang rule di elemen SECTION supaya judul dan grid hilang bersamaan. Heading/copy: {search_query} = kata kunci, {search_count} = total hasil semua tipe. Search bar: pakai element `searchBar` (actionUrl default "/search", mode input/overlay/inlineReveal). searchSiteContent dibatasi 12 hasil per tipe — loop menampilkan ≤12 per tipe. Tidak ada single-entity element (productDescription/full body, addToCart, gallery) — ini halaman daftar, bukan detail.

### `tenantPage` — Satu halaman konkret milik tenant (landing page, about, pricing, policy) yang di-render dari layout-nya sendiri. Copy-nya ditulis langsung, bukan diambil dari entity.
- **Required:** section
- **Recommended:** section, container, block, heading, basicText, richText, image, button, iconList, accordion
- **Forbidden:** checkoutItems, checkoutShipping, checkoutPayment, checkoutMessages, postContent, productDescription, productVariants, productPlans, productQuantity, productCustomerNote, productSku, productCountdown, productShare, productWholesaleTable, pageContent, pageFeaturedImage, courseDescription, coursePrice, courseCurriculum, courseEnroll, productImageGallery, cartItems, cartSummary, nameField, emailField, phoneField, textareaField, selectField, checkboxField, customHtml, submitButton
- Root: `<main>` · Typical structure: section[hero] > container > [heading(h1), basicText, button] | section[...] > container > [...] | section[cta] > container > [heading, button]
- Notes: Tulis judul hero sebagai `heading` biasa dengan teks langsung. JANGAN pakai pageTitle/pageContent/pageFeaturedImage — itu elemen dynamic untuk template `single_page`, dan di sini user tidak bisa mengeditnya dari palette (elemen dynamic disembunyikan di Page builder). Untuk section "produk/post/course terbaru": pakai container(grid) > block dengan queryLoop (dataSource=products|posts|courses) sebagai card. Di dalam card, elemen loop-safe (productImage/productTitle/productPrice, postFeaturedImage/postTitle/postExcerpt, courseImage/courseTitle) valid — tiap iterasi menyediakan entity-nya sendiri. Yang single-entity (addToCartButton, productVariants, productDescription, postContent) tetap tidak boleh: sebuah Page tidak punya entity tunggal. Judul Page (field `title`) dipakai untuk <title> SEO, menu, dan daftar halaman — bukan sebagai headline hero. Jangan menjejalkan copy hero ke situ supaya pageTitle ikut terisi. Paling fleksibel di antara semua surface — landing page biasanya stack hero + features + social proof + CTA. Stack 3-6 sections. Sama seperti template: header + footer global sudah dirender otomatis di sekeliling halaman. Jangan bikin ulang di dalam schema. `{site_name}` / `{site_year}` tetap bisa dipakai — itu tag global, bukan entity.


## Extended property reference (style system, layout props, dynamic tags, patterns)


# Alus Builder — AI Schema Generation Reference

> Feed this document to any AI to generate valid `BuilderSchema` JSON for Alus Builder.

> **Start at `AI-GUIDE.md`** (MCP `get_ai_guide`) for the decision tree, anti-patterns, and
> resource index — it's the thin orientation layer; this file is the detailed prop reference.
> For **complete worked schemas**, use MCP `list_examples` / `get_example`: full-page landings
> (shop/service/course/saas) and one schema per template type. Submit the result **directly** via
> the save tool (`pages_set_builder_schema` / `kits_set_builder_schema` / `themes_set_template`) —
> it validates + lints in one call; a separate `validate_schema` pass is not needed.

---

## Schema Structure

Every page schema must follow this structure:

```json
{
  "elements": [ /* AlusElement[] */ ]
}
```

> Versioning lives on the flat Alus File envelope (`alus-file` schema's `version` field, auto-filled from the latest published Alusio changelog at Export time) — not on the raw `BuilderSchema`.

> **Import & paste — the envelope is optional.** Both the Import dialog and Ctrl+V paste accept this minimal shape directly; you do **not** need the `source` / `version` / `exportedAt` Export envelope. Auto-detected inputs:
> 1. Raw schema: `{ "elements": [ ... ] }`
> 2. Bare array: `[ {...}, {...} ]`
> 3. A single bare element node: `{ "id", "type", "props", ... }` (wrapped into a one-element schema)
> 4. The flat Export envelope `{ "source": "alusioCopiedElements", "version", "exportedAt", "elements", "globalClasses"? }` from Copy-All — envelope fields are metadata only.
>
> Ctrl+V also accepts the internal clipboard wrapper `{ "_alus", "v", "element" }` **or** a bare element node. For AI output and hand-written snippets, prefer the minimal `{ "elements": [...] }` (or a single element node) — never hand-author the Export envelope.

> **Note:** Colors, fonts, and global radius live at the site Theme Style level (`/panel/themes` for system themes, `/dashboard/[siteSlug]/appearance/themes` for tenants). Schemas no longer carry per-page `globalStyles` — the site theme cascades via CSS variables `--theme-*`. Call MCP `get_theme_tokens` for the canonical list, and always include a hex fallback like `var(--theme-ink, #141413)`. Never invent new `--theme-*` names.

---

## Critical Rules

1. **Every element needs a unique `id`** — use short random strings like `"el-a1b2"`.
2. **Only layout elements can have `children`**: `section`, `container`, `block`. (Legacy `twoColLayout`/`col1`/`col2`/`sidebarLayout`/`sidebarMain`/`sidebarAside`/`tabs`/`tab` have been removed — use nested `container`/`block` with grid/flex layout instead.) **Exception:** `iconList` is a container whose `children` must be `iconListItem` elements only.
3. **Do NOT add `children` to non-layout elements** (heading, button, image, etc.) — except `iconList` (see above). `iconListItem` is **child-only**: emit it ONLY inside an `iconList`'s `children`, never at root or inside section/container/block/slider.
4. **`style` is optional** on every element. Omit if not needed.
5. **`selectorConfig` is optional** — omit unless you need CSS classes or IDs.
6. **Standardize every value through a theme token** (`var(--token, #fallback)`) — never hardcode. The theme defines the scale; literals freeze the layout off it. Always include a fallback; never invent token names (unknown names silently fall back). Call MCP `get_theme_tokens` for live values.

   | Dimension (CSS) | Token family |
   |---|---|
   | `gap` / `rowGap` / `columnGap`, `paddingTop`/`Bottom`/`Left`/`Right` | `--theme-space-*` |
   | `borderRadius` | `--theme-radius-button` / `-card` / `-pill` / `-sm` / `-md` |
   | `boxShadow` / elevation | `--theme-shadow-xs` / `-sm` / `-md` / `-lg` |
   | `fontSize` | `--theme-text-display-xl/lg/md` · `-title-lg/md` · `-body-md/sm` · `-caption` |
   | `lineHeight` | `--theme-leading-tight` / `-normal` / `-relaxed` |
   | `color` / `backgroundColor` / `borderColor` | `--theme-ink` / `-body` / `-muted` / `-primary` / `-on-primary` / `-canvas` / `-surface-card` / `-surface-dark` / `-on-dark` / `-hairline` |
   | `fontFamily` | `--theme-heading-font` / `--theme-body-font` |
   | container `maxWidth` | `--theme-container-width` |

   - **Spacing scale:** `--theme-space-xxs` (4) · `-xs` (8) · `-sm` (12) · `-md` (16) · `-lg` (24) · `-xl` (32) · `-xxl` (48) · `-section` (96). Default to `var(--theme-space-lg)` for body content gaps.
   - **Cards** should pull `borderRadius: var(--theme-radius-card)` + `boxShadow: var(--theme-shadow-sm)` + `backgroundColor: var(--theme-surface-card, #fff)` rather than ad-hoc values.
   - Only use literal px when the value is intentionally outside the scale (e.g. `'0px'` for explicit zero, `'2px'` for hairline-tight).

---

## Layout Element Props (shared by section/container/block)

**Modern shape**: only `htmlTag` and `layoutMode` live in `props`. All CSS — `display`, `direction`, `flexWrap`, `justifyContent`, `alignItems`, `gap`, `gridTemplateColumns`, `alignSelf`, `flexGrow`, `flexShrink`, `flexBasis`, `order`, dst — belongs in `style.{bp}.layout.*`. See **Style System** below.

```json
{
  "htmlTag": "div",
  "layoutMode": "simple"
}
```

**Legacy shape** (still accepted on input — store migrator lifts these to `style.desktop.layout.*` on schema load):

```json
{
  "htmlTag": "div",
  "display": "flex",
  "direction": "column",
  "flexWrap": "nowrap",
  "justifyContent": "flex-start",
  "alignItems": "stretch",
  "gap": "16px",
  "gridTemplateColumns": "",
  "flexGrow": 0,
  "flexShrink": 1,
  "alignSelf": "auto",
  "order": 0,
  "layoutMode": "simple"
}
```

**For horizontal rows**: set `style.desktop.layout.direction: "row"`, `"flexWrap": "wrap"` if needed.
**For two/N columns side by side**: use a `container` with `display: "grid"` + `gridTemplateColumns: "repeat(2, 1fr)"` (or `"1fr 1fr"`), OR a `container[direction: "row"]` with child `block` elements that have `flexGrow: 1`.
**No implicit column default**: `display: "grid"` with empty `gridTemplateColumns` renders as a single `auto` column (mirrors `gridTemplateRows`). Set `gridTemplateColumns` explicitly only when you want N columns — do NOT default to `repeat(3, 1fr)`.
**Child `block` inside row container**: set `style.desktop.layout.flexGrow: 1` to fill available space.
**Per-breakpoint flex/grid**: override at `style.tablet.layout.*` / `style.mobile.layout.*` — e.g. switch `direction` to `column` on mobile, or change `gridTemplateColumns` to `repeat(1, 1fr)`.

### `layoutMode` (Inspector mode hint)

`layoutMode` is **not** a rendering switch — it only controls which controls appear in the Inspector. The renderer always reads from `style.{bp}.layout.*`. But picking the wrong mode hides edit controls from the user, so emit it correctly:

- **`"simple"`** — set this when `style.layout` only contains values that Simple-mode can express: `display=flex` + `direction=column` (the List preset), OR `display=grid` with optional `gridTemplateColumns`, plus optionally `gap`/`columnGap`/`rowGap`. That's it. Nothing else.
- **`"advanced"`** — set this when ANY breakpoint's `style.layout` has at least one of:
  - `display ∉ {flex, grid}` (e.g. `block`, `inline-block`, `inline`, `none`)
  - `display=flex` with `direction ≠ column` (e.g. `row`, `row-reverse`, `column-reverse`)
  - any of: `flexWrap`, `alignSelf`, `justifyContent`, `alignItems`, `flexGrow`, `flexShrink`, `flexBasis`, `order`, `gridTemplateRows`, `gridAutoColumns`, `gridAutoRows`, `gridAutoFlow`, `justifyItems`, `alignContent`

Heuristic: every horizontal row, every flex-item using grow/shrink, every grid beyond plain columns → `"advanced"`. When in doubt, emit `"advanced"`. The import handler auto-promotes mismatches, but correct emission keeps the Inspector accurate on first paint.

### Transform & Parallax

`style.layout` has per-axis Transform fields (composed into a single `transform` CSS declaration in fixed order):

- `translateX` / `translateY` — string. Bare numbers auto-append `px`. Accepts `%`, `calc(...)`, `var(...)`.
- `rotate` — string. Bare numbers auto-append `deg`.
- `scale`, `scaleX`, `scaleY` — unitless strings.
- `skewX` / `skewY` — string. Bare numbers auto-append `deg`.
- `transformOrigin` — string (default browser `center`).

**Standard idiom: center an absolutely-positioned child (badge, ribbon, overlay)**:

```json
"style": {
  "desktop": {
    "layout": {
      "position": "absolute",
      "top": "-14px",
      "left": "50%",
      "translateX": "-50%"
    }
  }
}
```

Do NOT introduce a wrapper container to flex-center an absolute element — the transform fields exist for this. One element, four layout fields, done.

**Parallax** (`parallaxSpeedX` / `parallaxSpeedY`, numeric percent, typical ±50): runtime-only. The renderer emits `data-parallax-x` / `data-parallax-y` attrs; the global `<AlusParallaxObserver>` (site layout) reads them and applies additive translate on scroll. Builder canvas does not preview parallax. Honors `prefers-reduced-motion`. Static `translateX/Y` and parallax coexist — observer captures the base transform on first observation and appends scroll-derived translate.

**Masonry** (`masonry` boolean + `masonryColumns` 1–12 + `masonryGutter` CSS length + `masonryHorizontalOrder` boolean + `masonryTransitionDuration` CSS time + `masonryTransitionMode` 'scale'|'fade'|'slideLeft'|'slideRight'|'skew') — Pinterest-style staggered grid. Layout primitives (section/container/block) only. When `masonry: true`, the renderer:

- Emits `display: grid` + `grid-template-columns: repeat(N, 1fr)` + `grid-auto-rows: 1px` + `gap: <masonryGutter>` via the user style block (no inline emission, no `!important` — cascade owns the layout).
- Tags the element with `data-alus-masonry="true"` + mode/duration/horizontal-order attrs.
- Per-bp variants: tablet/mobile @media block emits same masonry CSS with per-bp `masonryColumns` / `masonryGutter` (cascading from desktop unless explicitly cleared at the bp). Defaults: desktop=3, tablet=2, mobile=1.

The global `<AlusMasonryObserver>` (mounted at site AND canvas roots — masonry IS layout, designer needs WYSIWYG) walks every `[data-alus-masonry="true"]` element and applies `grid-row-end: span ⌈height / (rowUnit + rowGap)⌉` to each direct child. CSS-grid based (not Isotope absolute positioning — modern, lighter, DOM stays in source flow).

Reveal animation: children start hidden + transformed (per `data-alus-masonry-mode`) and reveal when observer sets `data-alus-masonry-ready="1"`. Set `masonryTransitionDuration: "0"` to disable.

**UX lock**: when masonry is on, the Display field in Content tab is rendered visible-but-locked to `'grid'` with "Locked by Masonry" message; gap/gridTemplateColumns/gridTemplateRows/gridAutoColumns/gridAutoRows/gridAutoFlow/justifyItems/alignItemsGrid/justifyContentGrid/alignContent fields hide entirely (replaced by masonry's own Columns + Gutter in Style tab → Layout). Stored values preserved — disabling masonry restores prior display.

Typical post grid: `container[masonry, masonryColumns=3] > block[queryLoop=posts, card-content]`. Each looped post block becomes a masonry item.

---

## Style System

Optional `style` on any element:

```json
{
  "style": {
    "desktop": {
      "layout": {
        "paddingTop": "40px", "paddingBottom": "40px",
        "paddingLeft": "24px", "paddingRight": "24px",
        "width": "100%", "maxWidth": "1100px",
        "marginLeft": "auto", "marginRight": "auto",

        "display": "flex", "direction": "column",
        "justifyContent": "flex-start", "alignItems": "stretch",
        "gap": "16px",
        "gridTemplateColumns": "1fr 1fr",

        "alignSelf": "center", "justifySelf": "stretch",
        "flexGrow": 1, "flexShrink": 1, "flexBasis": "auto",

        "translateX": "-50%", "translateY": "-50%",
        "rotate": "0deg", "scale": "1",
        "transformOrigin": "center",
        "parallaxSpeedY": 0
      },
      "background": {
        "color": "#ffffff",
        "imageUrl": "https://...",
        "imageSize": "cover",
        "imagePosition": "center center"
      },
      "border": {
        "style": "solid",
        "width": { "top": "1px", "right": "0", "bottom": "0", "left": "0" },
        "color": "#e5e5e5",
        "radius": { "topLeft": "8px", "topRight": "8px", "bottomRight": "8px", "bottomLeft": "8px" }
      },
      "boxShadow": "0 4px 24px rgba(0,0,0,0.1)",
      "typography": {
        "color": "#ffffff",
        "fontSize": "18px",
        "fontWeight": "600"
      }
    },
    "tablet": { /* partial overrides */ },
    "mobile": { /* partial overrides */ },
    "selectorStyles": [
      { "selector": ":hover", "desktop": { "background": { "color": "#f0f0f0" } } }
    ]
  }
}
```

**Selector State (pseudo-states).** The `selectorStyles` array above is what the builder UI calls **"Selector State"** — the cursor-icon dropdown in the Style tab. Each entry targets a CSS state/scope via `selector` (`:hover`, `:active`, `:focus`, a class like `.myclass`, or a combination `.myclass:hover`) and carries per-breakpoint `desktop`/`tablet`/`mobile` overrides (deltas only — the base style stays in `style.desktop`). Global Classes store the same idea under a `pseudoStates` map.

---

## Responsive Typography (DTM cascade)

Per-breakpoint `typography.fontSize` cascades with auto-scale when breakpoint cells are empty. Unless you specifically want a different size at a breakpoint, leave `tablet`/`mobile` empty — the system handles scaling.

| Desktop | Tablet | Mobile | Effective tablet | Effective mobile |
|---|---|---|---|---|
| (empty) | (empty) | (empty) | element default (e.g. heading uses Tailwind responsive) | element default |
| `48px` | (empty) | (empty) | `43px` (auto-scale 0.9×) | `36px` (auto-scale 0.75×) |
| `48px` | `40px` | (empty) | `40px` | `34px` (auto-scale 0.85× from tablet) |
| `48px` | `40px` | `30px` | `40px` | `30px` |
| `3rem` | (empty) | (empty) | `3rem` (relative unit inherits as-is) | `3rem` |

**Rule of thumb when generating schema:**
- Set `style.desktop.typography.fontSize` and leave tablet/mobile empty for proportional scaling.
- Only override `tablet`/`mobile` when you want a non-proportional size (e.g. `8px` tighter mobile spacing).
- Use `rem`/`em` desktop values when you want font-size to follow user browser zoom — they cascade as-is, no auto-scale.

This applies to `heading`, `button`, `textLink`, `richText`, `counter`. Other elements treat per-breakpoint typography as user-only override (no auto-scale).

---

## Responsive layout patterns (REQUIRED on every page)

`style` cascades: **`desktop` is the base; `tablet` (≤1024px) and `mobile` (≤767px) are partial overrides** — repeat only the keys that change. Treat mobile as a first-class requirement, not an afterthought.

**1 — Stack multi-column grids.** Any `gridTemplateColumns` with more than one column must collapse on small screens (typically 4→2→1 or 3→2→1):

```json
"style": {
  "desktop": { "layout": { "display": "grid", "gridTemplateColumns": "repeat(4, 1fr)", "gap": "var(--theme-space-lg)" } },
  "tablet":  { "layout": { "gridTemplateColumns": "repeat(2, 1fr)" } },
  "mobile":  { "layout": { "gridTemplateColumns": "repeat(1, 1fr)" } }
}
```

**2 — Reduce section padding on mobile.** A `var(--theme-space-section)` (96) top/bottom is too tall on phones — step it down:

```json
"style": {
  "desktop": { "layout": { "paddingTop": "var(--theme-space-section)", "paddingBottom": "var(--theme-space-section)" } },
  "mobile":  { "layout": { "paddingTop": "var(--theme-space-xl)", "paddingBottom": "var(--theme-space-xl)" } }
}
```

**3 — Typography auto-scales (usually leave it).** Set desktop `fontSize` and leave tablet/mobile empty (auto-scale 0.9× / 0.85× / 0.75×). Only set a `mobile.typography.fontSize` for a deliberately non-proportional size:

```json
"style": {
  "desktop": { "typography": { "fontSize": "56px" } },
  "mobile":  { "typography": { "fontSize": "32px" } }
}
```

**4 — Flex rows → column on mobile** when items get cramped: `style.mobile.layout.direction: "column"`.

---

## Typography Slots (multi-text elements)

Some elements have multiple distinct text parts that can be styled independently.
Instead of one `style.typography` for the whole element, these elements expose
**typography slots** as element props. Each slot is a `ResponsiveTypography`
object with the same structure (`desktop`/`tablet`/`mobile`) and same auto-scale
rules described above.

Slots **take precedence** over `style.typography` for the slot's target text —
when a slot is set, that text uses slot values regardless of `style.typography`.

### Elements with typography slots

| Element | Slots (prop name) |
|---|---|
| `testimonial` | `quoteTypography`, `nameTypography` |
| `counter` | `numberTypography`, `labelTypography` |
| `accordion` | `triggerTypography`, `contentTypography` |
| `iconListItem` | `titleTypography`, `descriptionTypography`, `highlightTypography` |
| `countdownTimer` | `valueTypography`, `labelTypography` |
| `table` | `headerTypography`, `cellTypography` |

### Example

```json
{
  "id": "el-counter",
  "type": "counter",
  "props": {
    "countTo": 1000,
    "suffix": "+",
    "countTypography": {
      "desktop": { "fontSize": "48px", "fontWeight": "700", "color": "#0066cc" }
    },
    "suffixTypography": {
      "desktop": { "fontSize": "24px" }
    }
  }
}
```

When generating schemas: prefer slots for multi-text elements when the design
requires distinct typography per text part. Use `style.typography` for
single-text elements (heading, button, textLink, richText) or as a fallback
applied to whole multi-text elements.

---

## All Block Types

### Layout

| Type | Description | Has Children |
|------|-------------|:---:|
| `section` | Full-width section wrapper (use `htmlTag: "section"`) | ✅ |
| `container` | Boxed + centered at the theme container width (`--theme-container-width`, ~1100px) **by default** — do NOT add `maxWidth: "1100px"` / `margin auto`; only set `maxWidth` to go narrower (e.g. `720px`) or wider | ✅ |
| `block` | Full-width flex block (`flexGrow: 1` by default) | ✅ |

> Multi-column / sidebar / tabs are composed from these three primitives — set `style.desktop.layout.display: "grid"` with `gridTemplateColumns` for column layouts, or `direction: "row"` with `block` children for flex rows. Legacy `twoColLayout`/`col1`/`col2`/`sidebarLayout`/`sidebarMain`/`sidebarAside`/`tabs`/`tab` types were removed.

### Content

| Type | Key Props | Notes |
|------|-----------|-------|
| `heading` | `text`, `level` (h1-h6), `alignment`, `mode` (plain/rich), `richText` | Default `mode: 'plain'`. Set `mode: 'rich'` + inline-only HTML in `richText` for per-word styling (`<strong>`, `<em>`, `<u>`, `<s>`, `<a>`, `<span style="color:...">`). No block tags. |
| `richText` | `body` (HTML string) | Supports full HTML |
| `basicText` | `text`, `tag` (p/div/span/figcaption/address/figure), `link`, `wordsLimit`, `readMore` | Plain paragraph without WYSIWYG toolbar — use over `richText` when no inline formatting/headings needed. |
| `image` | `src`, `alt`, `link`, `alignment` | |
| `logo` | `sourceMode` (auto/image/text), `src`, `text`, `inverseSrc`, `height`, `width`, `linkType` (home/url/none), `link` | Site Logo. Default `sourceMode: 'auto'` pulls name + logo from Settings → General. `inverseSrc` swaps in once scroll > 50px (sticky/dark header). |
| `video` | `url` (YouTube), `aspectRatio` (16/9, 4/3, 1/1) | |
| `button` | `text`, `link`, `linkType` (url/whatsapp/checkout), `whatsappNumber`, `whatsappMessage`, `productId` (checkout mode), `icon`, `iconPosition`, `iconGap`, `iconSize` | `linkType='checkout'` adds 1 of `productId` to cart → /checkout (replaces the deprecated Checkout Button) and auto-fires AddToCart. Supports pixel events. |
| `textLink` | `text`, `link`, `alignment` | |
| `counter` | `count`, `label`, `prefix`, `suffix`, `alignment` | Animated number |
| `divider` | `height`, `width`, `style`, `color`, `space` | |
| `spacer` | `height` (px), `mobileHeight?` | |
| `accordion` | `items[]`, `variant`, `iconType`, `allowMultiple` | FAQ component |
| `iconList` | `children: iconListItem[]` (no props — grid = `style.desktop.layout.display: 'grid'`) | Feature list / checklist (items are child elements) |
| `iconListItem` | `icon`, `title`, `description?`, `highlight?`, `highlightLabel?`, `titleTag?`, `iconAfterTitle?` | One item inside an Icon List (child-only) |
| `alertBanner` | `message`, `variant` (info/success/warning/error), `isDismissible` | |
| `socialIcons` | `items[]` (platform, url), `size`, `variant`, `alignment` | |
| `table` | `headers[]`, `rows[]`, `striped`, `bordered` | |
| `countdownTimer` | `mode` (fixed/evergreen), `targetDate`, `evergreenSeconds`, `evergreenOnEnd`, `layout` (boxes/minimal), `alignment` | evergreen = per-visitor countdown, resumes across refresh |
| `customHtml` | `html` | Raw HTML |
| `htmlEmbed` | `html` | Embed widgets |
| `mapEmbed` | `embedUrl`, `height`, `borderRadius` | Google Maps |
| `form` | `formId` | References DB form. Success message / redirect / notifications live on the form (edit via Form Builder), not on this element. |
| `slider` | `perPage`/`perPageTablet`/`perPageMobile`, `gap`, `arrows`, `arrowsPosition` (`inside`\|`outside`), `pagination`, `sliderType` (`slide`\|`loop`\|`fade`), `autoplay`/`interval`, `speed`, `drag` | Carousel (SplideJS); each direct child = a slide. For a dynamic carousel, give it ONE child card with `queryLoop` (expands to one slide per item). Has children ✅ |

### Marketing

| Type | Key Props | Notes |
|------|-----------|-------|
| `testimonial` | `items[]` (name, rating, quote, avatar?) | |

### eCommerce

| Type | Key Props | Notes |
|------|-----------|-------|
| `productGrid` | `columns`, `limit`, `orderBy`, `showPrice` | Auto-fetches products |
| `productImageGallery` | `featuredImageSrc`, `thumbnailPosition`, `enableZoom` | Use shortcodes in templates |
| `checkoutButton` | `text`, `productId`, `alignment`, `width` | Direct to checkout |
| `checkoutItems` | `title`, `showImage`, `showQuantity` | Cart items list |
| `checkoutForm` | `title`, `showPhone`, `showAddress` | Shipping form |
| `checkoutShipping` | `title` | Shipping method picker |
| `checkoutPayment` | `title` | Payment method picker |
| `checkoutSummary` | `title`, `buttonText`, `showPromoCode` | Order total + pay button |
| `miniCheckout` | `selectedId`, `selectedType`, `successAction`, `enableCoupon` | Self-contained inline checkout for 1 product/bundle — place on landing pages |
| `courseGrid` | `columns`, `limit`, `showPrice` | Auto-fetches courses |
| `curriculumList` | `sections[]`, `defaultExpanded`, `accentColor` | Course curriculum |

### Navigation & Forms

| Type | Key Props | Notes |
|------|-----------|-------|
| `menu` | `items[]` (each with `link.type`+`dropdownType`), `desktop.layout`, `mobile.mode`, `bar.mobileLayout`, `dropdown.openOn` | Self-contained nav; items live in element props. Per-item `dropdownType: 'none' \| 'simple' \| 'mega'`. Mega items have a `megaContent: BlockSchema[]` editable via builder focused-edit. Mobile (hamburger) header arrangement via `bar.mobileLayout`: `logo-left-actions-right` \| `logo-left-burger-right` (default) \| `burger-left-actions-right` \| `burger-left-logo-right` \| `burger-left` \| `burger-right` \| `burger-left-logo-center` \| `actions-left-logo-center`. Layouts with an "actions" zone keep enabled actions (e.g. cart) on the bar; others fold them into the drawer. Drawer (panel saat hamburger diklik) styled via `mobile.drawer`: `mode` = `overlay` (default, floating absolute di bawah bar) \| `fullscreen` (panel layar penuh via portal fixed di site, item di tengah + tombol close); plus `bg`/`padding`/`borderRadius`/`shadow`/`gap`/`itemColor`/`itemColorHover`/`dividerColor`/`dividerWidth`/`maxHeight` (overlay only). |
| `searchBar` | `placeholder`, `width`, `alignment` | Site-wide search |
| `nameField` | `label`, `placeholder`, `required`, `width` | Form builder only |
| `emailField` | `label`, `placeholder`, `required` | Form builder only |
| `phoneField` | `label`, `placeholder`, `required` | Form builder only |
| `textareaField` | `label`, `rows`, `required` | Form builder only |
| `selectField` | `label`, `options[]`, `required` | Form builder only |
| `checkboxField` | `label`, `required` | Form builder only |
| `submitButton` | `text`, `alignment`, `width` | Form builder only |

### Dynamic (content-driven, template-only)

These elements auto-fill from the current post / product / page / course at render time. They ONLY make sense inside their compatible template type — placing them elsewhere yields placeholder text. The library filter (`TEMPLATE_ONLY_ELEMENTS`) hides them outside their context, so the AI should match `templateType` from the request when emitting.

> **Tip:** title/body can ALSO be composed from primitives + tags — `heading` + `{post_title}`/`{product_title}`/`{page_title}`/`{course_title}`, `richText` + `{post_content}`/`{product_description}`. Inside a Query Loop, the same entity tags resolve against the current iteration's row (so a `heading` with `{product_title}` inside a `queryLoop` on products renders the per-iteration product name). Use `{{loop.index}}` / `{{loop.first}}` etc. for iteration metadata. The legacy data-source-agnostic `{{item.*}}` set has been removed.

| Type | Compatible Templates | Key Props | Notes |
|------|----------------------|-----------|-------|
| `postTitle` | single_post, post_archive, post_category, search | `level`, `alignment`, `linkToPost` | Reads `post.title` |
| `postContent` | single_post | `plainText` | Reads `post.content` (HTML) |
| `postFeaturedImage` | single_post, post_archive, post_category, search | `aspectRatio`, `fit`, `preset`, `linkToPost` | Reads `post.featuredImageUrl` |
| `postExcerpt` | single_post, post_archive, post_category, search | `maxLength`, `fallbackToContent`, `ellipsis` | Reads `post.excerpt`, falls back to trimmed content |
| `postMeta` | single_post, post_archive, post_category, search | `showAuthor/Date/Category`, `dateFormat`, `separator`, `alignment` | Composite: author • date • category |
| `productTitle` | single_product, shop_catalog, product_category, search | `level`, `alignment`, `linkToProduct` | Reads `product.name` |
| `productPrice` | single_product, shop_catalog, product_category, search | `showOriginalOnSale`, `saleColorScheme`, `size`, `alignment` | Auto-shows sale strikethrough |
| `productDescription` | single_product | `plainText` | Reads `product.description` (HTML) |
| `productImage` | single_product, shop_catalog, product_category, search | `aspectRatio`, `fit`, `preset`, `linkToProduct` | Single thumbnail (use `productImageGallery` for gallery) |
| `addToCartButton` | single_product | `label`, `mode`, `width`, `variant`, `size`, `alignment`, `outOfStockLabel`, `needsSelectionLabel` | mode=`cart` adds + stays, `buy-now` adds + redirects to /checkout |
| `productQuantity` | single_product | `label`, `minQuantity`, `maxQuantity`, `size`, `alignment` | Stepper input; pair w/ addToCartButton |
| `productCustomerNote` | single_product | `label`, `placeholder`, `maxLength`, `rows` | Optional note textarea; value carried to cart by addToCartButton |
| `productVariants` | single_product | `style` (pills/dropdown/list), `label`, `showPrice`, `showStockState`, `alignment` | Variant picker (size/color/etc.) |
| `productStock` | single_product, shop_catalog, product_category, search | `inStockLabel`, `outOfStockLabel`, `lowStockLabel`, `lowStockThreshold`, `showCount`, `variant`, `size`, `alignment` | State badge — In Stock / Low / Out |
| `productSku` | single_product | `prefix`, `hideIfEmpty`, `size`, `alignment` | Shows SKU code |
| `productSalePercent` | single_product, shop_catalog, product_category, search | `showAs` (percent/amount/both), `variant`, `amountPrefix`, `hideWhenNoSale`, `size`, `alignment` | Discount badge — auto-hides when no sale |
| `productSalePrice` | single_product, shop_catalog, product_category, search | `alignment`, `size`, `hideWhenNoSale`, `outOfStockLabel`, `variantPriceDisplay` | Discounted price only — auto-hides when no sale |
| `productRegularPrice` | single_product, shop_catalog, product_category, search | `alignment`, `size`, `strikethrough` (onSale/always/never), `hideWhenNoSale`, `variantPriceDisplay` | Original price only — strikethrough pairs with Sale Price |
| `productCountdown` | single_product | `label`, `variant`, `showDays`, `onExpired`, `expiredText`, `labelDays/Hours/Minutes/Seconds`, `alignment` | Countdown to sale end |
| `productShare` | single_product | `label`, `platforms`, `variant`, `iconSize`, `shareText`, `alignment` | Social share buttons w/ template `{name}` `{url}` |
| `productWholesaleTable` | single_product | `title`, `layout` (table/cards/inline), `showSavings`, `qtyFormat`, `qtySuffix`, `hideWhenNoTiers`, `alignment` | Volume pricing tier table |
| `pageTitle` | single_page, search | `level`, `alignment` | Reads `page.title` (also inside a `pages` query loop). TEMPLATE only — in a tenant Page use `heading` |
| `pageContent` | single_page | `plainText` | Reads `page.content` — empty on builder-mode pages. TEMPLATE only — in a tenant Page use `richText` |
| `pageFeaturedImage` | single_page | `aspectRatio`, `fit`, `preset` | Reads `page.featuredImageUrl` — ⚠️ the `pages` table has no such column, so this always renders its placeholder. Use `image` |
| `courseTitle` | single_course, course_archive, search | `level`, `alignment` | Reads `course.title` |
| `courseDescription` | single_course | `plainText` | Reads `course.description` |
| `courseImage` | single_course, course_archive, search | `aspectRatio`, `fit`, `preset` | Reads `course.thumbnailUrl` |

> **AI guidance:** dedicated Dynamic elements (above) and primitive+tag composition are both supported. Dedicated elements (`postTitle`, `productTitle`, …) are friendlier for users dragging from the library; `{post_title}` shortcodes inside a `heading`/`richText` are handy for inline text and resolve per-iteration inside a query loop on the matching data source.

---

## Common Patterns

### Navbar (Logo + Menu + CTA)
```json
{
  "id": "el-nav",
  "type": "section",
  "props": { "htmlTag": "header", "layoutMode": "advanced" },
  "style": { "desktop": { "layout": { "display": "flex", "direction": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "16px", "paddingTop": "16px", "paddingBottom": "16px", "paddingLeft": "24px", "paddingRight": "24px" }, "background": { "color": "#ffffff" } } },
  "children": [
    { "id": "el-logo", "type": "logo", "props": { "sourceMode": "auto", "linkType": "home", "height": "40px" } },
    {
      "id": "el-nav-menu",
      "type": "block",
      "props": { "htmlTag": "div", "layoutMode": "advanced" },
      "style": { "desktop": { "layout": { "display": "flex", "direction": "row", "flexGrow": 1, "justifyContent": "center", "alignItems": "center", "gap": "16px" } } },
      "children": [
        { "id": "el-menu", "type": "menu", "props": { "items": [{ "id": "i1", "label": "Home", "link": { "type": "custom", "url": "/" }, "dropdownType": "none" }, { "id": "i2", "label": "Shop", "link": { "type": "custom", "url": "/shop" }, "dropdownType": "none" }, { "id": "i3", "label": "About", "link": { "type": "custom", "url": "/about" }, "dropdownType": "none" }], "desktop": { "layout": "horizontal", "alignment": "center", "gap": "8px" }, "mobile": { "breakpoint": "768px", "mode": "hamburger", "alignment": "right", "gap": "0px", "hamburger": { "label": "Menu", "color": "", "bg": "", "borderRadius": "" } }, "dropdown": { "openOn": "hover", "animation": "fade", "animationDuration": 200, "hoverDelay": 120 }, "styling": { "level1": { "fontSize": "", "fontWeight": "", "color": "", "colorHover": "", "bg": "", "bgHover": "", "px": "", "py": "", "borderRadius": "" }, "submenu": { "fontSize": "", "fontWeight": "", "color": "", "colorHover": "", "bg": "", "bgHover": "", "px": "", "py": "", "borderRadius": "" }, "dropdown": { "bg": "", "borderRadius": "", "shadow": "", "padding": "", "minWidth": "" } } } }
      ]
    },
    { "id": "el-cta", "type": "button", "props": { "text": "Mulai Sekarang", "link": "#", "alignment": "right", "width": "auto" } }
  ]
}
```

### Hero Section (Text Left, Image Right)
```json
{
  "id": "el-hero",
  "type": "section",
  "props": { "htmlTag": "section", "layoutMode": "simple" },
  "style": { "desktop": { "layout": { "paddingTop": "80px", "paddingBottom": "80px" } } },
  "children": [
    {
      "id": "el-hero-cont",
      "type": "container",
      "props": { "htmlTag": "div", "layoutMode": "advanced" },
      "style": { "desktop": { "layout": { "display": "grid", "gridTemplateColumns": "1fr 1fr", "gap": "48px", "alignItems": "center" } } },
      "children": [
        {
          "id": "el-hero-col1",
          "type": "block",
          "props": { "htmlTag": "div", "layoutMode": "simple" },
          "style": { "desktop": { "layout": { "display": "flex", "gap": "24px" } } },
          "children": [
            { "id": "el-h1", "type": "heading", "props": { "text": "Solusi Terbaik untuk Bisnis Kamu", "level": "h1", "alignment": "left" } },
            { "id": "el-sub", "type": "richText", "props": { "body": "<p>Deskripsi singkat yang menarik perhatian calon pelanggan kamu.</p>" } },
            { "id": "el-cta-btn", "type": "button", "props": { "text": "Mulai Gratis", "link": "#", "alignment": "left", "width": "auto" } }
          ]
        },
        {
          "id": "el-hero-col2",
          "type": "block",
          "props": { "htmlTag": "div", "layoutMode": "advanced" },
          "style": { "desktop": { "layout": { "display": "flex", "alignItems": "center", "justifyContent": "center" } } },
          "children": [
            { "id": "el-hero-img", "type": "image", "props": { "src": "", "alt": "Hero Image" } }
          ]
        }
      ]
    }
  ]
}
```

---

## Shortcodes (Template Pages)

Use in `src`, `text`, or `body` props for template pages:

| Shortcode | Used In | Value |
|-----------|---------|-------|
| `{site_logo}` | header/footer | Site logo image URL |
| `{site_name}` | any | Site name string |
| `{site_tagline}` | any | Site tagline |
| `{site_year}` | footer | Current year |
| `{product_title}` | single_product | Product name |
| `{product_price}` | single_product | Current price, formatted (sale-aware) — no filter needed |
| `{product_sale_price}` | single_product | Discounted price, formatted; empty when not on sale |
| `{product_original_price}` | single_product | Pre-sale price, formatted (for strikethrough); empty when not on sale |
| `{product_description}` | single_product | Product description HTML |
| `{product_image}` | single_product | Featured image URL |
| `{product_gallery_images}` | single_product | Gallery images JSON |
| `{post_title}` | single_post | Post title |
| `{post_content}` | single_post | Post body HTML |
| `{post_featured_image}` | single_post | Featured image URL |
| `{cart_count}` | header/checkout | Number of cart items |

---

## Common Lucide Icons

`Check` `CheckCircle` `Shield` `Star` `Zap` `Heart` `Globe` `Lock` `Users` `Mail` `Phone` `MapPin` `Clock` `Calendar` `Award` `Lightbulb` `Rocket` `TrendingUp` `Package` `ShoppingCart` `CreditCard` `Truck` `Headphones` `MessageSquare` `ArrowRight` `ChevronRight` `Code` `Settings` `Search` `Menu` `Home` `User` `Eye` `Download` `Share2` `Facebook` `Instagram` `Youtube` `Linkedin`

---

## Tips for AI Generation

- **Always use `section → container`** as the base structure for each page section.
- **For any side-by-side / multi-column layout**: use a `container` with `style.desktop.layout.display: "grid"` and `gridTemplateColumns: "1fr 1fr"` (or `"repeat(N, 1fr)"`). Drop to `repeat(1, 1fr)` at `style.mobile.layout` if you want columns to stack.
- **For a horizontal row** (stats, buttons, icons): set `style.desktop.layout.direction: "row"` on a `block` or `container` and emit `props.layoutMode: "advanced"`.
- **Dark/colored sections**: set `section style.background.color`.
- **White text on dark bg**: set element `style.typography.color: "#ffffff"`.
- **Full-width buttons**: set `width: "full"` on `button`.
- **Center content**: set `alignItems: "center"` on the parent container.
- **Vertical spacing between sections**: use `spacer` or `paddingTop/Bottom` on section style.
- **Custom nav without `menu` element**: section(row) → [image(logo), block(flex-grow=1, row) → [textLink × n], button(CTA)].
- **Generate complete schemas** — don't leave empty element arrays, fill with placeholder content.


## Worked examples (ready to import)

Each block below is a complete page schema — paste it straight into Import. Adapt the copy/content to the request, keep the structure.

### landing-shop — Full-page landing for an online store (template type: home). Demonstrates: nav section, two-column hero with CTA, iconList feature row, dynamic product grid via queryLoop, testimonials, dark CTA band with explicit background, and a multi-column footer. Topic: fashion/retail store.
```json
{
  "elements": [
    {
      "id": "el-nav",
      "type": "section",
      "props": {
        "htmlTag": "header",
        "layoutMode": "advanced"
      },
      "style": {
        "desktop": {
          "layout": {
            "display": "flex",
            "direction": "row",
            "alignItems": "center",
            "justifyContent": "space-between",
            "gap": "var(--theme-space-md)",
            "paddingTop": "var(--theme-space-md)",
            "paddingBottom": "var(--theme-space-md)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "var(--theme-surface-card, #ffffff)"
          }
        }
      },
      "children": [
        {
          "id": "el-logo",
          "type": "logo",
          "props": {
            "sourceMode": "auto",
            "linkType": "home",
            "height": "40px"
          }
        },
        {
          "id": "el-nav-menu",
          "type": "block",
          "props": {
            "htmlTag": "div",
            "layoutMode": "advanced"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "row",
                "flexGrow": 1,
                "justifyContent": "center",
                "alignItems": "center",
                "gap": "var(--theme-space-md)"
              }
            }
          },
          "children": [
            {
              "id": "el-menu",
              "type": "menu",
              "props": {
                "items": [
                  {
                    "id": "i1",
                    "label": "Beranda",
                    "link": {
                      "type": "custom",
                      "url": "/"
                    },
                    "dropdownType": "none"
                  },
                  {
                    "id": "i2",
                    "label": "Katalog",
                    "link": {
                      "type": "custom",
                      "url": "/shop"
                    },
                    "dropdownType": "none"
                  },
                  {
                    "id": "i3",
                    "label": "Tentang",
                    "link": {
                      "type": "custom",
                      "url": "/about"
                    },
                    "dropdownType": "none"
                  }
                ]
              }
            }
          ]
        },
        {
          "id": "el-nav-cta",
          "type": "button",
          "props": {
            "text": "Belanja",
            "link": "/shop",
            "alignment": "right",
            "width": "auto",
            "icon": "ShoppingCart",
            "iconPosition": "left"
          }
        }
      ]
    },
    {
      "id": "el-hero",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-hero-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "advanced"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "grid",
                "gridTemplateColumns": "1fr 1fr",
                "gap": "var(--theme-space-xl)",
                "alignItems": "center"
              }
            },
            "mobile": {
              "layout": {
                "gridTemplateColumns": "repeat(1, 1fr)"
              }
            }
          },
          "children": [
            {
              "id": "el-hero-col1",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "column",
                    "gap": "var(--theme-space-lg)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-hero-h1",
                  "type": "heading",
                  "props": {
                    "text": "Gaya Baru, Setiap Hari",
                    "level": "h1",
                    "alignment": "left"
                  },
                  "style": {
                    "desktop": {
                      "typography": {
                        "fontSize": "48px",
                        "fontWeight": "700"
                      }
                    }
                  }
                },
                {
                  "id": "el-hero-sub",
                  "type": "richText",
                  "props": {
                    "body": "<p>Koleksi pakaian premium dengan harga bersahabat. Pengiriman cepat ke seluruh Indonesia.</p>"
                  }
                },
                {
                  "id": "el-hero-actions",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "advanced"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "row",
                        "gap": "var(--theme-space-md)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-hero-cta1",
                      "type": "button",
                      "props": {
                        "text": "Belanja Sekarang",
                        "link": "/shop",
                        "alignment": "left",
                        "width": "auto"
                      }
                    },
                    {
                      "id": "el-hero-cta2",
                      "type": "button",
                      "props": {
                        "text": "Lihat Koleksi",
                        "link": "/shop?sort=new",
                        "alignment": "left",
                        "width": "auto"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "id": "el-hero-col2",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "advanced"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "alignItems": "center",
                    "justifyContent": "center"
                  }
                }
              },
              "children": [
                {
                  "id": "el-hero-img",
                  "type": "image",
                  "props": {
                    "src": "",
                    "alt": "Model mengenakan koleksi terbaru"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-features",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xxl)",
            "paddingBottom": "var(--theme-space-xxl)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "color-mix(in srgb,var(--theme-ink,#111) 4%,#fff)"
          }
        }
      },
      "children": [
        {
          "id": "el-features-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {}
            }
          },
          "children": [
            {
              "id": "el-features-list",
              "type": "iconList",
              "props": {
                "layout": "grid",
                "columns": 3
              },
              "children": [
                {
                  "id": "el-feat-1",
                  "type": "iconListItem",
                  "props": {
                    "icon": "Truck",
                    "title": "Gratis Ongkir",
                    "description": "Untuk pembelian di atas Rp200.000"
                  }
                },
                {
                  "id": "el-feat-2",
                  "type": "iconListItem",
                  "props": {
                    "icon": "Shield",
                    "title": "Garansi Kualitas",
                    "description": "Tukar gratis dalam 7 hari"
                  }
                },
                {
                  "id": "el-feat-3",
                  "type": "iconListItem",
                  "props": {
                    "icon": "Headphones",
                    "title": "Dukungan 24/7",
                    "description": "Tim kami siap membantu kapan saja"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-products",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-products-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-xl)"
              }
            }
          },
          "children": [
            {
              "id": "el-products-h",
              "type": "heading",
              "props": {
                "text": "Produk Terlaris",
                "level": "h2",
                "alignment": "center"
              }
            },
            {
              "id": "el-products-grid",
              "type": "container",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "grid",
                    "gridTemplateColumns": "repeat(3, 1fr)",
                    "gap": "var(--theme-space-lg)"
                  }
                },
                "mobile": {
                  "layout": {
                    "gridTemplateColumns": "repeat(1, 1fr)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-product-card",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple",
                    "queryLoop": {
                      "enabled": true,
                      "source": "products",
                      "limit": 6,
                      "orderBy": "best_selling"
                    }
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-sm)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-pc-img",
                      "type": "image",
                      "props": {
                        "src": "{product_image}",
                        "alt": "{product_title}",
                        "link": "{product_url}"
                      }
                    },
                    {
                      "id": "el-pc-title",
                      "type": "heading",
                      "props": {
                        "text": "{product_title}",
                        "level": "h3",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-pc-price",
                      "type": "richText",
                      "props": {
                        "body": "<p>{product_price}</p>"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-testi",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xxl)",
            "paddingBottom": "var(--theme-space-xxl)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "color-mix(in srgb,var(--theme-ink,#111) 4%,#fff)"
          }
        }
      },
      "children": [
        {
          "id": "el-testi-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {}
            }
          },
          "children": [
            {
              "id": "el-testi-grid",
              "type": "container",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "grid",
                    "gridTemplateColumns": "repeat(2, 1fr)",
                    "gap": "var(--theme-space-lg)"
                  }
                },
                "mobile": {
                  "layout": {
                    "gridTemplateColumns": "repeat(1, 1fr)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-testi-1",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-sm)",
                        "paddingTop": "var(--theme-space-lg)",
                        "paddingBottom": "var(--theme-space-lg)",
                        "paddingLeft": "var(--theme-space-lg)",
                        "paddingRight": "var(--theme-space-lg)"
                      },
                      "background": {
                        "color": "var(--theme-surface-card, #ffffff)"
                      },
                      "border": {
                        "style": "solid",
                        "width": {
                          "top": "1px",
                          "right": "1px",
                          "bottom": "1px",
                          "left": "1px"
                        },
                        "color": "var(--theme-hairline, #e5e5e5)",
                        "radius": {
                          "topLeft": "12px",
                          "topRight": "12px",
                          "bottomRight": "12px",
                          "bottomLeft": "12px"
                        }
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-testi-1-q",
                      "type": "richText",
                      "props": {
                        "body": "<p>\"Kualitas bahannya bagus banget, pengiriman juga cepat!\"</p>"
                      }
                    },
                    {
                      "id": "el-testi-1-n",
                      "type": "heading",
                      "props": {
                        "text": "Sari W.",
                        "level": "h4",
                        "alignment": "left"
                      }
                    }
                  ]
                },
                {
                  "id": "el-testi-2",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-sm)",
                        "paddingTop": "var(--theme-space-lg)",
                        "paddingBottom": "var(--theme-space-lg)",
                        "paddingLeft": "var(--theme-space-lg)",
                        "paddingRight": "var(--theme-space-lg)"
                      },
                      "background": {
                        "color": "var(--theme-surface-card, #ffffff)"
                      },
                      "border": {
                        "style": "solid",
                        "width": {
                          "top": "1px",
                          "right": "1px",
                          "bottom": "1px",
                          "left": "1px"
                        },
                        "color": "var(--theme-hairline, #e5e5e5)",
                        "radius": {
                          "topLeft": "12px",
                          "topRight": "12px",
                          "bottomRight": "12px",
                          "bottomLeft": "12px"
                        }
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-testi-2-q",
                      "type": "richText",
                      "props": {
                        "body": "<p>\"Sudah langganan, selalu puas dengan pelayanannya.\"</p>"
                      }
                    },
                    {
                      "id": "el-testi-2-n",
                      "type": "heading",
                      "props": {
                        "text": "Budi P.",
                        "level": "h4",
                        "alignment": "left"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-cta",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "var(--theme-ink, #141413)"
          }
        }
      },
      "children": [
        {
          "id": "el-cta-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "alignItems": "center",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "720px"
              }
            }
          },
          "children": [
            {
              "id": "el-cta-h",
              "type": "heading",
              "props": {
                "text": "Daftar & Dapatkan Diskon 15%",
                "level": "h2",
                "alignment": "center"
              },
              "style": {
                "desktop": {
                  "typography": {
                    "color": "var(--theme-on-dark, #ffffff)"
                  }
                }
              }
            },
            {
              "id": "el-cta-p",
              "type": "richText",
              "props": {
                "body": "<p>Jadi member dan nikmati penawaran eksklusif setiap minggu.</p>"
              },
              "style": {
                "desktop": {
                  "typography": {
                    "color": "var(--theme-on-dark, #ffffff)"
                  }
                }
              }
            },
            {
              "id": "el-cta-btn",
              "type": "button",
              "props": {
                "text": "Daftar Sekarang",
                "link": "/register",
                "alignment": "center",
                "width": "auto"
              }
            }
          ]
        }
      ]
    },
    {
      "id": "el-footer",
      "type": "section",
      "props": {
        "htmlTag": "footer",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xxl)",
            "paddingBottom": "var(--theme-space-xl)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "var(--theme-surface-card, #ffffff)"
          }
        }
      },
      "children": [
        {
          "id": "el-footer-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "advanced"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "grid",
                "gridTemplateColumns": "2fr 1fr 1fr",
                "gap": "var(--theme-space-xl)"
              }
            },
            "mobile": {
              "layout": {
                "gridTemplateColumns": "repeat(1, 1fr)"
              }
            }
          },
          "children": [
            {
              "id": "el-footer-brand",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "column",
                    "gap": "var(--theme-space-sm)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-footer-logo",
                  "type": "logo",
                  "props": {
                    "sourceMode": "auto",
                    "linkType": "home",
                    "height": "32px"
                  }
                },
                {
                  "id": "el-footer-tag",
                  "type": "basicText",
                  "props": {
                    "text": "{site_tagline}",
                    "tag": "p"
                  }
                },
                {
                  "id": "el-footer-social",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "advanced"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "row",
                        "gap": "var(--theme-space-md)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-footer-ig",
                      "type": "textLink",
                      "props": {
                        "text": "Instagram",
                        "link": "#",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-footer-fb",
                      "type": "textLink",
                      "props": {
                        "text": "Facebook",
                        "link": "#",
                        "alignment": "left"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "id": "el-footer-links1",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "column",
                    "gap": "var(--theme-space-xs)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-fl1-h",
                  "type": "heading",
                  "props": {
                    "text": "Toko",
                    "level": "h4",
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-fl1-a",
                  "type": "textLink",
                  "props": {
                    "text": "Katalog",
                    "link": "/shop",
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-fl1-b",
                  "type": "textLink",
                  "props": {
                    "text": "Promo",
                    "link": "/shop?promo=1",
                    "alignment": "left"
                  }
                }
              ]
            },
            {
              "id": "el-footer-links2",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "column",
                    "gap": "var(--theme-space-xs)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-fl2-h",
                  "type": "heading",
                  "props": {
                    "text": "Bantuan",
                    "level": "h4",
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-fl2-a",
                  "type": "textLink",
                  "props": {
                    "text": "Kontak",
                    "link": "/contact",
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-fl2-b",
                  "type": "textLink",
                  "props": {
                    "text": "Kebijakan",
                    "link": "/policy",
                    "alignment": "left"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
```

### landing-service — Full-page landing for a service business / agency (template type: home). Demonstrates: centered hero, services grid built from container+block cards (no dynamic data), stats row with counters, FAQ via accordion+accordionItem, and a contact section referencing a DB form. Topic: digital agency / professional services.
```json
{
  "elements": [
    {
      "id": "el-hero",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "var(--theme-ink, #141413)"
          }
        }
      },
      "children": [
        {
          "id": "el-hero-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "alignItems": "center",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "760px"
              }
            }
          },
          "children": [
            {
              "id": "el-hero-h1",
              "type": "heading",
              "props": {
                "text": "Kami Bantu Bisnis Kamu Tumbuh",
                "level": "h1",
                "alignment": "center"
              },
              "style": {
                "desktop": {
                  "typography": {
                    "color": "var(--theme-on-dark, #ffffff)",
                    "fontSize": "52px",
                    "fontWeight": "700"
                  }
                }
              }
            },
            {
              "id": "el-hero-sub",
              "type": "richText",
              "props": {
                "body": "<p>Strategi digital, desain, dan pengembangan web yang terukur untuk hasil nyata.</p>"
              },
              "style": {
                "desktop": {
                  "typography": {
                    "color": "var(--theme-on-dark, #ffffff)"
                  }
                }
              }
            },
            {
              "id": "el-hero-cta",
              "type": "button",
              "props": {
                "text": "Konsultasi Gratis",
                "link": "#kontak",
                "alignment": "center",
                "width": "auto"
              }
            }
          ]
        }
      ]
    },
    {
      "id": "el-services",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-services-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-xl)"
              }
            }
          },
          "children": [
            {
              "id": "el-services-h",
              "type": "heading",
              "props": {
                "text": "Layanan Kami",
                "level": "h2",
                "alignment": "center"
              }
            },
            {
              "id": "el-services-grid",
              "type": "container",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "grid",
                    "gridTemplateColumns": "repeat(3, 1fr)",
                    "gap": "var(--theme-space-lg)"
                  }
                },
                "mobile": {
                  "layout": {
                    "gridTemplateColumns": "repeat(1, 1fr)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-svc-1",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-sm)",
                        "paddingTop": "var(--theme-space-lg)",
                        "paddingBottom": "var(--theme-space-lg)",
                        "paddingLeft": "var(--theme-space-lg)",
                        "paddingRight": "var(--theme-space-lg)"
                      },
                      "border": {
                        "style": "solid",
                        "width": {
                          "top": "1px",
                          "right": "1px",
                          "bottom": "1px",
                          "left": "1px"
                        },
                        "color": "var(--theme-hairline, #e5e5e5)",
                        "radius": {
                          "topLeft": "12px",
                          "topRight": "12px",
                          "bottomRight": "12px",
                          "bottomLeft": "12px"
                        }
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-svc-1-h",
                      "type": "heading",
                      "props": {
                        "text": "Web Development",
                        "level": "h3",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-svc-1-p",
                      "type": "richText",
                      "props": {
                        "body": "<p>Website cepat, modern, dan siap konversi.</p>"
                      }
                    }
                  ]
                },
                {
                  "id": "el-svc-2",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-sm)",
                        "paddingTop": "var(--theme-space-lg)",
                        "paddingBottom": "var(--theme-space-lg)",
                        "paddingLeft": "var(--theme-space-lg)",
                        "paddingRight": "var(--theme-space-lg)"
                      },
                      "border": {
                        "style": "solid",
                        "width": {
                          "top": "1px",
                          "right": "1px",
                          "bottom": "1px",
                          "left": "1px"
                        },
                        "color": "var(--theme-hairline, #e5e5e5)",
                        "radius": {
                          "topLeft": "12px",
                          "topRight": "12px",
                          "bottomRight": "12px",
                          "bottomLeft": "12px"
                        }
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-svc-2-h",
                      "type": "heading",
                      "props": {
                        "text": "Branding & Desain",
                        "level": "h3",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-svc-2-p",
                      "type": "richText",
                      "props": {
                        "body": "<p>Identitas visual yang kuat dan konsisten.</p>"
                      }
                    }
                  ]
                },
                {
                  "id": "el-svc-3",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-sm)",
                        "paddingTop": "var(--theme-space-lg)",
                        "paddingBottom": "var(--theme-space-lg)",
                        "paddingLeft": "var(--theme-space-lg)",
                        "paddingRight": "var(--theme-space-lg)"
                      },
                      "border": {
                        "style": "solid",
                        "width": {
                          "top": "1px",
                          "right": "1px",
                          "bottom": "1px",
                          "left": "1px"
                        },
                        "color": "var(--theme-hairline, #e5e5e5)",
                        "radius": {
                          "topLeft": "12px",
                          "topRight": "12px",
                          "bottomRight": "12px",
                          "bottomLeft": "12px"
                        }
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-svc-3-h",
                      "type": "heading",
                      "props": {
                        "text": "Digital Marketing",
                        "level": "h3",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-svc-3-p",
                      "type": "richText",
                      "props": {
                        "body": "<p>Kampanye berbasis data untuk pertumbuhan.</p>"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-stats",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xxl)",
            "paddingBottom": "var(--theme-space-xxl)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "color-mix(in srgb,var(--theme-ink,#111) 4%,#fff)"
          }
        }
      },
      "children": [
        {
          "id": "el-stats-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "grid",
                "gridTemplateColumns": "repeat(3, 1fr)",
                "gap": "var(--theme-space-lg)"
              }
            },
            "mobile": {
              "layout": {
                "gridTemplateColumns": "repeat(1, 1fr)"
              }
            }
          },
          "children": [
            {
              "id": "el-stat-1",
              "type": "counter",
              "props": {
                "count": 250,
                "suffix": "+",
                "label": "Proyek Selesai",
                "alignment": "center"
              }
            },
            {
              "id": "el-stat-2",
              "type": "counter",
              "props": {
                "count": 98,
                "suffix": "%",
                "label": "Klien Puas",
                "alignment": "center"
              }
            },
            {
              "id": "el-stat-3",
              "type": "counter",
              "props": {
                "count": 12,
                "suffix": " thn",
                "label": "Pengalaman",
                "alignment": "center"
              }
            }
          ]
        }
      ]
    },
    {
      "id": "el-faq",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-faq-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "760px"
              }
            }
          },
          "children": [
            {
              "id": "el-faq-h",
              "type": "heading",
              "props": {
                "text": "Pertanyaan Umum",
                "level": "h2",
                "alignment": "center"
              }
            },
            {
              "id": "el-faq-acc",
              "type": "accordion",
              "props": {
                "allowMultiple": false,
                "iconType": "chevron"
              },
              "children": [
                {
                  "id": "el-faq-1",
                  "type": "accordionItem",
                  "props": {
                    "title": "Berapa lama pengerjaan sebuah proyek?"
                  },
                  "children": [
                    {
                      "id": "el-faq-1-b",
                      "type": "richText",
                      "props": {
                        "body": "<p>Umumnya 2–6 minggu tergantung kompleksitas dan ruang lingkup.</p>"
                      }
                    }
                  ]
                },
                {
                  "id": "el-faq-2",
                  "type": "accordionItem",
                  "props": {
                    "title": "Apakah ada garansi revisi?"
                  },
                  "children": [
                    {
                      "id": "el-faq-2-b",
                      "type": "richText",
                      "props": {
                        "body": "<p>Ya, setiap paket mencakup revisi sesuai kesepakatan di awal.</p>"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-kontak",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "selectorConfig": {
        "cssId": "kontak"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "color-mix(in srgb,var(--theme-ink,#111) 4%,#fff)"
          }
        }
      },
      "children": [
        {
          "id": "el-kontak-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "640px"
              }
            }
          },
          "children": [
            {
              "id": "el-kontak-h",
              "type": "heading",
              "props": {
                "text": "Hubungi Kami",
                "level": "h2",
                "alignment": "center"
              }
            },
            {
              "id": "el-kontak-p",
              "type": "richText",
              "props": {
                "body": "<p>Hubungi kami lewat tombol di bawah — tim kami membalas dalam 1×24 jam.</p>"
              }
            },
            {
              "id": "el-kontak-info",
              "type": "iconList",
              "props": {
                "layout": "vertical"
              },
              "children": [
                {
                  "id": "el-kontak-email",
                  "type": "iconListItem",
                  "props": {
                    "icon": "Mail",
                    "title": "halo@contoh.com"
                  }
                },
                {
                  "id": "el-kontak-phone",
                  "type": "iconListItem",
                  "props": {
                    "icon": "Phone",
                    "title": "+62 812-3456-7890"
                  }
                }
              ]
            },
            {
              "id": "el-kontak-cta",
              "type": "button",
              "props": {
                "text": "Chat via WhatsApp",
                "linkType": "whatsapp",
                "whatsappNumber": "6281234567890",
                "whatsappMessage": "Halo, saya ingin konsultasi",
                "icon": "MessageSquare",
                "iconPosition": "left"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "alignSelf": "center"
                  }
                }
              }
            }
          ]
        }
      ]
    }
  ]
}
```

### landing-course — Full-page landing for an online course / LMS (template type: home). Demonstrates: hero with single CTA, value-prop iconList, 'what you'll learn' checklist, dynamic course grid via queryLoop on the courses source, instructor highlight (two-col), and a dark CTA band. Topic: e-learning / eCourse.
```json
{
  "elements": [
    {
      "id": "el-hero",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-hero-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "alignItems": "center",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "780px"
              }
            }
          },
          "children": [
            {
              "id": "el-hero-badge",
              "type": "alertBanner",
              "props": {
                "message": "Akses seumur hidup + sertifikat",
                "variant": "info",
                "isDismissible": false
              }
            },
            {
              "id": "el-hero-h1",
              "type": "heading",
              "props": {
                "text": "Kuasai Skill Baru dari Nol",
                "level": "h1",
                "alignment": "center"
              },
              "style": {
                "desktop": {
                  "typography": {
                    "fontSize": "52px",
                    "fontWeight": "700"
                  }
                }
              }
            },
            {
              "id": "el-hero-sub",
              "type": "richText",
              "props": {
                "body": "<p>Belajar langsung dari praktisi dengan studi kasus nyata dan latihan terstruktur.</p>"
              }
            },
            {
              "id": "el-hero-cta",
              "type": "button",
              "props": {
                "text": "Lihat Semua Kelas",
                "link": "/courses",
                "alignment": "center",
                "width": "auto"
              }
            }
          ]
        }
      ]
    },
    {
      "id": "el-learn",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xxl)",
            "paddingBottom": "var(--theme-space-xxl)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "color-mix(in srgb,var(--theme-ink,#111) 4%,#fff)"
          }
        }
      },
      "children": [
        {
          "id": "el-learn-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "900px"
              }
            }
          },
          "children": [
            {
              "id": "el-learn-h",
              "type": "heading",
              "props": {
                "text": "Yang Akan Kamu Pelajari",
                "level": "h2",
                "alignment": "center"
              }
            },
            {
              "id": "el-learn-list",
              "type": "iconList",
              "props": {
                "layout": "grid",
                "columns": 2
              },
              "children": [
                {
                  "id": "el-learn-1",
                  "type": "iconListItem",
                  "props": {
                    "icon": "Check",
                    "title": "Dasar hingga mahir",
                    "description": "Kurikulum bertahap yang mudah diikuti"
                  }
                },
                {
                  "id": "el-learn-2",
                  "type": "iconListItem",
                  "props": {
                    "icon": "Check",
                    "title": "Proyek nyata",
                    "description": "Portofolio yang bisa langsung dipakai"
                  }
                },
                {
                  "id": "el-learn-3",
                  "type": "iconListItem",
                  "props": {
                    "icon": "Check",
                    "title": "Komunitas aktif",
                    "description": "Diskusi dan dukungan sesama peserta"
                  }
                },
                {
                  "id": "el-learn-4",
                  "type": "iconListItem",
                  "props": {
                    "icon": "Check",
                    "title": "Sertifikat resmi",
                    "description": "Bukti kompetensi setelah lulus"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-courses",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-courses-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-xl)"
              }
            }
          },
          "children": [
            {
              "id": "el-courses-h",
              "type": "heading",
              "props": {
                "text": "Kelas Populer",
                "level": "h2",
                "alignment": "center"
              }
            },
            {
              "id": "el-courses-grid",
              "type": "container",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "grid",
                    "gridTemplateColumns": "repeat(3, 1fr)",
                    "gap": "var(--theme-space-lg)"
                  }
                },
                "mobile": {
                  "layout": {
                    "gridTemplateColumns": "repeat(1, 1fr)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-course-card",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple",
                    "queryLoop": {
                      "enabled": true,
                      "source": "courses",
                      "limit": 6,
                      "orderBy": "popular"
                    }
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-sm)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-cc-img",
                      "type": "courseImage",
                      "props": {
                        "aspectRatio": "16/9",
                        "fit": "cover",
                        "preset": "cardWide"
                      }
                    },
                    {
                      "id": "el-cc-title",
                      "type": "courseTitle",
                      "props": {
                        "level": "h3",
                        "alignment": "left"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-instr",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xxl)",
            "paddingBottom": "var(--theme-space-xxl)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "color-mix(in srgb,var(--theme-ink,#111) 4%,#fff)"
          }
        }
      },
      "children": [
        {
          "id": "el-instr-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "advanced"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "grid",
                "gridTemplateColumns": "1fr 2fr",
                "gap": "var(--theme-space-xl)",
                "alignItems": "center"
              }
            },
            "mobile": {
              "layout": {
                "gridTemplateColumns": "repeat(1, 1fr)"
              }
            }
          },
          "children": [
            {
              "id": "el-instr-img-wrap",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "advanced"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "justifyContent": "center"
                  }
                }
              },
              "children": [
                {
                  "id": "el-instr-img",
                  "type": "image",
                  "props": {
                    "src": "",
                    "alt": "Foto instruktur"
                  }
                }
              ]
            },
            {
              "id": "el-instr-body",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "column",
                    "gap": "var(--theme-space-md)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-instr-h",
                  "type": "heading",
                  "props": {
                    "text": "Diajar oleh Praktisi Berpengalaman",
                    "level": "h2",
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-instr-p",
                  "type": "richText",
                  "props": {
                    "body": "<p>Instruktur kami telah membimbing ribuan peserta dengan pendekatan praktis dan mudah dipahami.</p>"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-cta",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "var(--theme-ink, #141413)"
          }
        }
      },
      "children": [
        {
          "id": "el-cta-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "alignItems": "center",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "680px"
              }
            }
          },
          "children": [
            {
              "id": "el-cta-h",
              "type": "heading",
              "props": {
                "text": "Mulai Belajar Hari Ini",
                "level": "h2",
                "alignment": "center"
              },
              "style": {
                "desktop": {
                  "typography": {
                    "color": "var(--theme-on-dark, #ffffff)"
                  }
                }
              }
            },
            {
              "id": "el-cta-btn",
              "type": "button",
              "props": {
                "text": "Daftar Kelas",
                "link": "/courses",
                "alignment": "center",
                "width": "auto"
              }
            }
          ]
        }
      ]
    }
  ]
}
```

### landing-saas — Full-page landing for a SaaS / digital product (template type: home). Demonstrates: centered hero, logos/trust row, feature blocks alternating two-col, a pricing section built from container+block plan cards with iconList feature checklists, and a final CTA. Topic: software product / app.
```json
{
  "elements": [
    {
      "id": "el-hero",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-hero-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "alignItems": "center",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "820px"
              }
            }
          },
          "children": [
            {
              "id": "el-hero-h1",
              "type": "heading",
              "props": {
                "text": "Kelola Bisnis dalam Satu Dasbor",
                "level": "h1",
                "alignment": "center"
              },
              "style": {
                "desktop": {
                  "typography": {
                    "fontSize": "56px",
                    "fontWeight": "700"
                  }
                }
              }
            },
            {
              "id": "el-hero-sub",
              "type": "richText",
              "props": {
                "body": "<p>Otomatiskan pekerjaan rutin dan fokus pada yang penting. Coba gratis 14 hari, tanpa kartu kredit.</p>"
              }
            },
            {
              "id": "el-hero-actions",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "advanced"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "row",
                    "justifyContent": "center",
                    "gap": "var(--theme-space-md)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-hero-cta1",
                  "type": "button",
                  "props": {
                    "text": "Coba Gratis",
                    "link": "/register",
                    "alignment": "center",
                    "width": "auto"
                  }
                },
                {
                  "id": "el-hero-cta2",
                  "type": "button",
                  "props": {
                    "text": "Lihat Demo",
                    "link": "#demo",
                    "alignment": "center",
                    "width": "auto",
                    "icon": "ArrowRight",
                    "iconPosition": "right"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-feature",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xxl)",
            "paddingBottom": "var(--theme-space-xxl)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-feature-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "advanced"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "grid",
                "gridTemplateColumns": "1fr 1fr",
                "gap": "var(--theme-space-xl)",
                "alignItems": "center"
              }
            },
            "mobile": {
              "layout": {
                "gridTemplateColumns": "repeat(1, 1fr)"
              }
            }
          },
          "children": [
            {
              "id": "el-feature-body",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "column",
                    "gap": "var(--theme-space-md)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-feature-h",
                  "type": "heading",
                  "props": {
                    "text": "Analitik Real-Time",
                    "level": "h2",
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-feature-p",
                  "type": "richText",
                  "props": {
                    "body": "<p>Pantau performa bisnis kamu kapan saja dengan dasbor yang intuitif dan laporan otomatis.</p>"
                  }
                },
                {
                  "id": "el-feature-link",
                  "type": "textLink",
                  "props": {
                    "text": "Pelajari lebih lanjut",
                    "link": "#fitur",
                    "alignment": "left"
                  }
                }
              ]
            },
            {
              "id": "el-feature-img-wrap",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "advanced"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "justifyContent": "center"
                  }
                }
              },
              "children": [
                {
                  "id": "el-feature-img",
                  "type": "image",
                  "props": {
                    "src": "",
                    "alt": "Tangkapan layar dasbor"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-pricing",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "color-mix(in srgb,var(--theme-ink,#111) 4%,#fff)"
          }
        }
      },
      "children": [
        {
          "id": "el-pricing-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-xl)"
              }
            }
          },
          "children": [
            {
              "id": "el-pricing-h",
              "type": "heading",
              "props": {
                "text": "Harga Sederhana & Transparan",
                "level": "h2",
                "alignment": "center"
              }
            },
            {
              "id": "el-pricing-grid",
              "type": "container",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "grid",
                    "gridTemplateColumns": "repeat(3, 1fr)",
                    "gap": "var(--theme-space-lg)",
                    "alignItems": "stretch"
                  }
                },
                "mobile": {
                  "layout": {
                    "gridTemplateColumns": "repeat(1, 1fr)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-plan-1",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-md)",
                        "paddingTop": "var(--theme-space-xl)",
                        "paddingBottom": "var(--theme-space-xl)",
                        "paddingLeft": "var(--theme-space-lg)",
                        "paddingRight": "var(--theme-space-lg)"
                      },
                      "background": {
                        "color": "var(--theme-surface-card, #ffffff)"
                      },
                      "border": {
                        "style": "solid",
                        "width": {
                          "top": "1px",
                          "right": "1px",
                          "bottom": "1px",
                          "left": "1px"
                        },
                        "color": "var(--theme-hairline, #e5e5e5)",
                        "radius": {
                          "topLeft": "16px",
                          "topRight": "16px",
                          "bottomRight": "16px",
                          "bottomLeft": "16px"
                        }
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-plan-1-name",
                      "type": "heading",
                      "props": {
                        "text": "Starter",
                        "level": "h3",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-plan-1-price",
                      "type": "heading",
                      "props": {
                        "text": "Rp99rb/bln",
                        "level": "h2",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-plan-1-feats",
                      "type": "iconList",
                      "props": {
                        "layout": "vertical"
                      },
                      "children": [
                        {
                          "id": "el-p1-f1",
                          "type": "iconListItem",
                          "props": {
                            "icon": "Check",
                            "title": "1 pengguna"
                          }
                        },
                        {
                          "id": "el-p1-f2",
                          "type": "iconListItem",
                          "props": {
                            "icon": "Check",
                            "title": "Laporan dasar"
                          }
                        }
                      ]
                    },
                    {
                      "id": "el-plan-1-cta",
                      "type": "button",
                      "props": {
                        "text": "Pilih Starter",
                        "link": "/register?plan=starter",
                        "alignment": "left",
                        "width": "full"
                      }
                    }
                  ]
                },
                {
                  "id": "el-plan-2",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-md)",
                        "paddingTop": "var(--theme-space-xl)",
                        "paddingBottom": "var(--theme-space-xl)",
                        "paddingLeft": "var(--theme-space-lg)",
                        "paddingRight": "var(--theme-space-lg)"
                      },
                      "background": {
                        "color": "var(--theme-ink, #141413)"
                      },
                      "border": {
                        "style": "solid",
                        "width": {
                          "top": "1px",
                          "right": "1px",
                          "bottom": "1px",
                          "left": "1px"
                        },
                        "color": "var(--theme-ink, #141413)",
                        "radius": {
                          "topLeft": "16px",
                          "topRight": "16px",
                          "bottomRight": "16px",
                          "bottomLeft": "16px"
                        }
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-plan-2-name",
                      "type": "heading",
                      "props": {
                        "text": "Pro",
                        "level": "h3",
                        "alignment": "left"
                      },
                      "style": {
                        "desktop": {
                          "typography": {
                            "color": "var(--theme-on-dark, #ffffff)"
                          }
                        }
                      }
                    },
                    {
                      "id": "el-plan-2-price",
                      "type": "heading",
                      "props": {
                        "text": "Rp249rb/bln",
                        "level": "h2",
                        "alignment": "left"
                      },
                      "style": {
                        "desktop": {
                          "typography": {
                            "color": "var(--theme-on-dark, #ffffff)"
                          }
                        }
                      }
                    },
                    {
                      "id": "el-plan-2-feats",
                      "type": "iconList",
                      "props": {
                        "layout": "vertical"
                      },
                      "children": [
                        {
                          "id": "el-p2-f1",
                          "type": "iconListItem",
                          "props": {
                            "icon": "Check",
                            "title": "5 pengguna"
                          }
                        },
                        {
                          "id": "el-p2-f2",
                          "type": "iconListItem",
                          "props": {
                            "icon": "Check",
                            "title": "Analitik lanjutan"
                          }
                        },
                        {
                          "id": "el-p2-f3",
                          "type": "iconListItem",
                          "props": {
                            "icon": "Check",
                            "title": "Dukungan prioritas"
                          }
                        }
                      ]
                    },
                    {
                      "id": "el-plan-2-cta",
                      "type": "button",
                      "props": {
                        "text": "Pilih Pro",
                        "link": "/register?plan=pro",
                        "alignment": "left",
                        "width": "full"
                      }
                    }
                  ]
                },
                {
                  "id": "el-plan-3",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-md)",
                        "paddingTop": "var(--theme-space-xl)",
                        "paddingBottom": "var(--theme-space-xl)",
                        "paddingLeft": "var(--theme-space-lg)",
                        "paddingRight": "var(--theme-space-lg)"
                      },
                      "background": {
                        "color": "var(--theme-surface-card, #ffffff)"
                      },
                      "border": {
                        "style": "solid",
                        "width": {
                          "top": "1px",
                          "right": "1px",
                          "bottom": "1px",
                          "left": "1px"
                        },
                        "color": "var(--theme-hairline, #e5e5e5)",
                        "radius": {
                          "topLeft": "16px",
                          "topRight": "16px",
                          "bottomRight": "16px",
                          "bottomLeft": "16px"
                        }
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-plan-3-name",
                      "type": "heading",
                      "props": {
                        "text": "Business",
                        "level": "h3",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-plan-3-price",
                      "type": "heading",
                      "props": {
                        "text": "Hubungi kami",
                        "level": "h2",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-plan-3-feats",
                      "type": "iconList",
                      "props": {
                        "layout": "vertical"
                      },
                      "children": [
                        {
                          "id": "el-p3-f1",
                          "type": "iconListItem",
                          "props": {
                            "icon": "Check",
                            "title": "Pengguna tak terbatas"
                          }
                        },
                        {
                          "id": "el-p3-f2",
                          "type": "iconListItem",
                          "props": {
                            "icon": "Check",
                            "title": "SLA & onboarding khusus"
                          }
                        }
                      ]
                    },
                    {
                      "id": "el-plan-3-cta",
                      "type": "button",
                      "props": {
                        "text": "Hubungi Sales",
                        "link": "/contact",
                        "alignment": "left",
                        "width": "full"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "el-cta",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-section)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-cta-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "alignItems": "center",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "680px"
              }
            }
          },
          "children": [
            {
              "id": "el-cta-h",
              "type": "heading",
              "props": {
                "text": "Siap Meningkatkan Produktivitas?",
                "level": "h2",
                "alignment": "center"
              }
            },
            {
              "id": "el-cta-btn",
              "type": "button",
              "props": {
                "text": "Mulai Uji Coba Gratis",
                "link": "/register",
                "alignment": "center",
                "width": "auto"
              }
            }
          ]
        }
      ]
    }
  ]
}
```

### template-single-product — Template: single_product. Standard 2-column product detail (gallery left, info+CTA right) using dedicated Dynamic elements. NOTE: do NOT include header/footer — they are global chrome added automatically. Required: productTitle, productPrice. Dynamic elements bind to the ambient product at render.
```json
{
  "elements": [
    {
      "id": "el-pd",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xl)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-pd-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "advanced"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "grid",
                "gridTemplateColumns": "1fr 1fr",
                "gap": "var(--theme-space-xl)",
                "alignItems": "start"
              }
            },
            "mobile": {
              "layout": {
                "gridTemplateColumns": "repeat(1, 1fr)"
              }
            }
          },
          "children": [
            {
              "id": "el-pd-gallery-wrap",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "children": [
                {
                  "id": "el-pd-gallery",
                  "type": "productImageGallery",
                  "props": {
                    "thumbnailPosition": "bottom",
                    "enableZoom": true
                  }
                }
              ]
            },
            {
              "id": "el-pd-info",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "column",
                    "gap": "var(--theme-space-md)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-pd-stock",
                  "type": "productStock",
                  "props": {
                    "variant": "badge",
                    "size": "sm",
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-pd-title",
                  "type": "productTitle",
                  "props": {
                    "level": "h1",
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-pd-price-row",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "advanced"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "row",
                        "alignItems": "center",
                        "gap": "var(--theme-space-sm)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-pd-price",
                      "type": "productPrice",
                      "props": {
                        "showOriginalOnSale": true,
                        "size": "lg",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-pd-salepct",
                      "type": "productSalePercent",
                      "props": {
                        "showAs": "percent",
                        "variant": "badge",
                        "hideWhenNoSale": true,
                        "size": "sm",
                        "alignment": "left"
                      }
                    }
                  ]
                },
                {
                  "id": "el-pd-desc",
                  "type": "productDescription",
                  "props": {
                    "plainText": false
                  }
                },
                {
                  "id": "el-pd-variants",
                  "type": "productVariants",
                  "props": {
                    "style": "pills",
                    "label": "Pilihan",
                    "showPrice": false,
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-pd-buy-row",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "advanced"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "row",
                        "alignItems": "end",
                        "gap": "var(--theme-space-md)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-pd-qty",
                      "type": "productQuantity",
                      "props": {
                        "label": "Jumlah",
                        "minQuantity": 1,
                        "size": "md",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-pd-atc",
                      "type": "addToCartButton",
                      "props": {
                        "label": "Tambah ke Keranjang",
                        "mode": "cart",
                        "width": "full",
                        "size": "lg",
                        "alignment": "left"
                      }
                    }
                  ]
                },
                {
                  "id": "el-pd-sku",
                  "type": "productSku",
                  "props": {
                    "prefix": "SKU:",
                    "hideIfEmpty": true,
                    "size": "sm",
                    "alignment": "left"
                  }
                },
                {
                  "id": "el-pd-share",
                  "type": "productShare",
                  "props": {
                    "label": "Bagikan:",
                    "platforms": [
                      "whatsapp",
                      "facebook",
                      "x"
                    ],
                    "variant": "icon",
                    "alignment": "left"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
```

### template-single-post — Template: single_post. Blog article layout using dedicated Dynamic post elements. NOTE: do NOT include header/footer (global chrome). Demonstrates featured image, title, meta (author/date/category), and full content. Dynamic elements bind to the ambient post at render.
```json
{
  "elements": [
    {
      "id": "el-post",
      "type": "section",
      "props": {
        "htmlTag": "article",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xl)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-post-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-lg)",
                "maxWidth": "760px"
              }
            }
          },
          "children": [
            {
              "id": "el-post-title",
              "type": "postTitle",
              "props": {
                "level": "h1",
                "alignment": "left",
                "linkToPost": false
              }
            },
            {
              "id": "el-post-meta",
              "type": "postMeta",
              "props": {
                "showAuthor": true,
                "showDate": true,
                "showCategory": true,
                "dateFormat": "long",
                "separator": "•",
                "alignment": "left"
              }
            },
            {
              "id": "el-post-img",
              "type": "postFeaturedImage",
              "props": {
                "aspectRatio": "16/9",
                "fit": "cover",
                "preset": "cardWide",
                "linkToPost": false
              }
            },
            {
              "id": "el-post-content",
              "type": "postContent",
              "props": {
                "plainText": false
              }
            }
          ]
        }
      ]
    }
  ]
}
```

### template-shop-catalog — Template: shop_catalog. Product archive using the repeat-self Query Loop model instead of the (deprecated) productGrid element. NOTE: do NOT include header/footer (global chrome). ONE card block carries props.queryLoop and is repeated once per product; descendants read the current row via product Dynamic elements.
```json
{
  "elements": [
    {
      "id": "el-cat",
      "type": "section",
      "props": {
        "htmlTag": "section",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xl)",
            "paddingBottom": "var(--theme-space-section)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          }
        }
      },
      "children": [
        {
          "id": "el-cat-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-xl)"
              }
            }
          },
          "children": [
            {
              "id": "el-cat-h",
              "type": "heading",
              "props": {
                "text": "Semua Produk",
                "level": "h1",
                "alignment": "left"
              }
            },
            {
              "id": "el-cat-grid",
              "type": "container",
              "props": {
                "htmlTag": "div",
                "layoutMode": "simple"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "grid",
                    "gridTemplateColumns": "repeat(4, 1fr)",
                    "gap": "var(--theme-space-lg)"
                  }
                },
                "tablet": {
                  "layout": {
                    "gridTemplateColumns": "repeat(2, 1fr)"
                  }
                },
                "mobile": {
                  "layout": {
                    "gridTemplateColumns": "repeat(1, 1fr)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-cat-card",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-sm)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-cat-card-imgwrap",
                      "type": "block",
                      "props": {
                        "htmlTag": "div",
                        "layoutMode": "advanced"
                      },
                      "style": {
                        "desktop": {
                          "layout": {
                            "position": "relative"
                          }
                        }
                      },
                      "children": [
                        {
                          "id": "el-cat-img",
                          "type": "productImage",
                          "props": {
                            "aspectRatio": "1/1",
                            "fit": "cover",
                            "preset": "cardMedium",
                            "linkToProduct": true
                          }
                        },
                        {
                          "id": "el-cat-salepct",
                          "type": "productSalePercent",
                          "props": {
                            "showAs": "percent",
                            "variant": "badge",
                            "hideWhenNoSale": true,
                            "size": "sm",
                            "alignment": "left"
                          },
                          "style": {
                            "desktop": {
                              "layout": {
                                "position": "absolute",
                                "top": "var(--theme-space-sm)",
                                "left": "var(--theme-space-sm)"
                              }
                            }
                          }
                        }
                      ]
                    },
                    {
                      "id": "el-cat-title",
                      "type": "productTitle",
                      "props": {
                        "level": "h3",
                        "alignment": "left",
                        "linkToProduct": true
                      }
                    },
                    {
                      "id": "el-cat-price",
                      "type": "productPrice",
                      "props": {
                        "showOriginalOnSale": true,
                        "size": "md",
                        "alignment": "left"
                      }
                    },
                    {
                      "id": "el-cat-stock",
                      "type": "productStock",
                      "props": {
                        "variant": "text",
                        "size": "sm",
                        "alignment": "left"
                      }
                    }
                  ],
                  "queryLoop": {
                    "enabled": true,
                    "source": "products",
                    "limit": 12,
                    "orderBy": "newest"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
```

### template-header — Template: header (global chrome fragment). Compact bar (56–80px): logo left, menu center, CTA + cart right. Required: section (root htmlTag header). Uses the `cart` element for the cart icon + slide-in panel. Sticky behavior is handled by the site layout / headerSettings, not here.
```json
{
  "elements": [
    {
      "id": "el-hdr",
      "type": "section",
      "props": {
        "htmlTag": "header",
        "layoutMode": "advanced"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-md)",
            "paddingBottom": "var(--theme-space-md)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "var(--theme-surface-card, #ffffff)"
          },
          "border": {
            "style": "solid",
            "width": {
              "top": "0",
              "right": "0",
              "bottom": "1px",
              "left": "0"
            },
            "color": "var(--theme-hairline, #e5e5e5)"
          }
        }
      },
      "children": [
        {
          "id": "el-hdr-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "advanced"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "row",
                "alignItems": "center",
                "justifyContent": "space-between",
                "gap": "var(--theme-space-md)",
                "maxWidth": "1200px"
              }
            }
          },
          "children": [
            {
              "id": "el-hdr-logo",
              "type": "logo",
              "props": {
                "sourceMode": "auto",
                "linkType": "home",
                "height": "36px"
              }
            },
            {
              "id": "el-hdr-nav",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "advanced"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "row",
                    "flexGrow": 1,
                    "justifyContent": "center",
                    "alignItems": "center"
                  }
                }
              },
              "children": [
                {
                  "id": "el-hdr-menu",
                  "type": "menu",
                  "props": {
                    "items": [
                      {
                        "id": "m1",
                        "label": "Beranda",
                        "link": {
                          "type": "custom",
                          "url": "/"
                        },
                        "dropdownType": "none"
                      },
                      {
                        "id": "m2",
                        "label": "Katalog",
                        "link": {
                          "type": "custom",
                          "url": "/shop"
                        },
                        "dropdownType": "none"
                      },
                      {
                        "id": "m3",
                        "label": "Blog",
                        "link": {
                          "type": "custom",
                          "url": "/blog"
                        },
                        "dropdownType": "none"
                      },
                      {
                        "id": "m4",
                        "label": "Kontak",
                        "link": {
                          "type": "custom",
                          "url": "/contact"
                        },
                        "dropdownType": "none"
                      }
                    ]
                  }
                }
              ]
            },
            {
              "id": "el-hdr-actions",
              "type": "block",
              "props": {
                "htmlTag": "div",
                "layoutMode": "advanced"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "flex",
                    "direction": "row",
                    "alignItems": "center",
                    "gap": "var(--theme-space-sm)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-hdr-search",
                  "type": "searchBar",
                  "props": {
                    "placeholder": "Cari produk...",
                    "width": "200px",
                    "alignment": "right"
                  }
                },
                {
                  "id": "el-hdr-cart",
                  "type": "cart",
                  "props": {
                    "hideCartDetails": false
                  }
                },
                {
                  "id": "el-hdr-cta",
                  "type": "button",
                  "props": {
                    "text": "Masuk",
                    "link": "/login",
                    "alignment": "right",
                    "width": "auto"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
```

### template-footer — Template: footer (global chrome fragment). Multi-column footer: brand + tagline + social, two link columns, and a bottom copyright bar using the {site_year} and {site_name} shortcodes. Required: section (root htmlTag footer).
```json
{
  "elements": [
    {
      "id": "el-ftr",
      "type": "section",
      "props": {
        "htmlTag": "footer",
        "layoutMode": "simple"
      },
      "style": {
        "desktop": {
          "layout": {
            "paddingTop": "var(--theme-space-xxl)",
            "paddingBottom": "var(--theme-space-lg)",
            "paddingLeft": "var(--theme-space-lg)",
            "paddingRight": "var(--theme-space-lg)"
          },
          "background": {
            "color": "var(--theme-ink, #141413)"
          }
        }
      },
      "children": [
        {
          "id": "el-ftr-cont",
          "type": "container",
          "props": {
            "htmlTag": "div",
            "layoutMode": "simple"
          },
          "style": {
            "desktop": {
              "layout": {
                "display": "flex",
                "direction": "column",
                "gap": "var(--theme-space-xl)"
              }
            }
          },
          "children": [
            {
              "id": "el-ftr-top",
              "type": "container",
              "props": {
                "htmlTag": "div",
                "layoutMode": "advanced"
              },
              "style": {
                "desktop": {
                  "layout": {
                    "display": "grid",
                    "gridTemplateColumns": "2fr 1fr 1fr",
                    "gap": "var(--theme-space-xl)"
                  }
                },
                "mobile": {
                  "layout": {
                    "gridTemplateColumns": "repeat(1, 1fr)"
                  }
                }
              },
              "children": [
                {
                  "id": "el-ftr-brand",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-sm)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-ftr-logo",
                      "type": "logo",
                      "props": {
                        "sourceMode": "auto",
                        "linkType": "home",
                        "height": "32px",
                        "inverseSrc": ""
                      }
                    },
                    {
                      "id": "el-ftr-tag",
                      "type": "basicText",
                      "props": {
                        "text": "{site_tagline}",
                        "tag": "p"
                      },
                      "style": {
                        "desktop": {
                          "typography": {
                            "color": "var(--theme-on-dark, #ffffff)"
                          }
                        }
                      }
                    },
                    {
                      "id": "el-ftr-social",
                      "type": "block",
                      "props": {
                        "htmlTag": "div",
                        "layoutMode": "advanced"
                      },
                      "style": {
                        "desktop": {
                          "layout": {
                            "display": "flex",
                            "direction": "row",
                            "gap": "var(--theme-space-md)"
                          }
                        }
                      },
                      "children": [
                        {
                          "id": "el-ftr-ig",
                          "type": "textLink",
                          "props": {
                            "text": "Instagram",
                            "link": "#",
                            "alignment": "left"
                          },
                          "style": {
                            "desktop": {
                              "typography": {
                                "color": "var(--theme-on-dark, #ffffff)"
                              }
                            }
                          }
                        },
                        {
                          "id": "el-ftr-fb",
                          "type": "textLink",
                          "props": {
                            "text": "Facebook",
                            "link": "#",
                            "alignment": "left"
                          },
                          "style": {
                            "desktop": {
                              "typography": {
                                "color": "var(--theme-on-dark, #ffffff)"
                              }
                            }
                          }
                        },
                        {
                          "id": "el-ftr-yt",
                          "type": "textLink",
                          "props": {
                            "text": "YouTube",
                            "link": "#",
                            "alignment": "left"
                          },
                          "style": {
                            "desktop": {
                              "typography": {
                                "color": "var(--theme-on-dark, #ffffff)"
                              }
                            }
                          }
                        }
                      ]
                    }
                  ]
                },
                {
                  "id": "el-ftr-col1",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-xs)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-ftr-c1-h",
                      "type": "heading",
                      "props": {
                        "text": "Perusahaan",
                        "level": "h4",
                        "alignment": "left"
                      },
                      "style": {
                        "desktop": {
                          "typography": {
                            "color": "var(--theme-on-dark, #ffffff)"
                          }
                        }
                      }
                    },
                    {
                      "id": "el-ftr-c1-a",
                      "type": "textLink",
                      "props": {
                        "text": "Tentang",
                        "link": "/about",
                        "alignment": "left"
                      },
                      "style": {
                        "desktop": {
                          "typography": {
                            "color": "var(--theme-on-dark, #ffffff)"
                          }
                        }
                      }
                    },
                    {
                      "id": "el-ftr-c1-b",
                      "type": "textLink",
                      "props": {
                        "text": "Karier",
                        "link": "/careers",
                        "alignment": "left"
                      },
                      "style": {
                        "desktop": {
                          "typography": {
                            "color": "var(--theme-on-dark, #ffffff)"
                          }
                        }
                      }
                    }
                  ]
                },
                {
                  "id": "el-ftr-col2",
                  "type": "block",
                  "props": {
                    "htmlTag": "div",
                    "layoutMode": "simple"
                  },
                  "style": {
                    "desktop": {
                      "layout": {
                        "display": "flex",
                        "direction": "column",
                        "gap": "var(--theme-space-xs)"
                      }
                    }
                  },
                  "children": [
                    {
                      "id": "el-ftr-c2-h",
                      "type": "heading",
                      "props": {
                        "text": "Bantuan",
                        "level": "h4",
                        "alignment": "left"
                      },
                      "style": {
                        "desktop": {
                          "typography": {
                            "color": "var(--theme-on-dark, #ffffff)"
                          }
                        }
                      }
                    },
                    {
                      "id": "el-ftr-c2-a",
                      "type": "textLink",
                      "props": {
                        "text": "Kontak",
                        "link": "/contact",
                        "alignment": "left"
                      },
                      "style": {
                        "desktop": {
                          "typography": {
                            "color": "var(--theme-on-dark, #ffffff)"
                          }
                        }
                      }
                    },
                    {
                      "id": "el-ftr-c2-b",
                      "type": "textLink",
                      "props": {
                        "text": "Kebijakan Privasi",
                        "link": "/privacy",
                        "alignment": "left"
                      },
                      "style": {
                        "desktop": {
                          "typography": {
                            "color": "var(--theme-on-dark, #ffffff)"
                          }
                        }
                      }
                    }
                  ]
                }
              ]
            },
            {
              "id": "el-ftr-divider",
              "type": "divider",
              "props": {
                "height": 1,
                "width": "100%",
                "style": "solid",
                "color": "var(--theme-hairline, #333333)"
              }
            },
            {
              "id": "el-ftr-copy",
              "type": "basicText",
              "props": {
                "text": "© {site_year} {site_name}. Semua hak dilindungi.",
                "tag": "p"
              },
              "style": {
                "desktop": {
                  "typography": {
                    "color": "var(--theme-on-dark, #ffffff)",
                    "fontSize": "14px"
                  }
                }
              }
            }
          ]
        }
      ]
    }
  ]
}
```


## Theme tokens

Standardize every value through a token: `var(--token, #fallback)` for spacing (gap/padding), radius (`borderRadius`), shadow (`boxShadow`), font-size, line-height, colors, and fonts. Always include a fallback; never invent token names.

| Token | Category | Meaning |
|---|---|---|
| `--theme-primary` | color | CTA / accent fill |
| `--theme-primary-active` | color | Pressed / hover-darker primary |
| `--theme-on-primary` | color | Text/icon on primary fill |
| `--theme-canvas` | color | Page background |
| `--theme-surface-card` | color | Content card background |
| `--theme-surface-dark` | color | Dark band / footer background |
| `--theme-surface-dark-elevated` | color | Card / divider on dark surface |
| `--theme-on-dark` | color | Text/icon on dark surface |
| `--theme-on-dark-soft` | color | Muted text/icon on dark surface |
| `--theme-ink` | color | Heading + strong text on canvas |
| `--theme-body` | color | Running paragraph text |
| `--theme-muted` | color | Sub-text, captions |
| `--theme-hairline` | color | 1px borders / dividers on canvas |
| `--theme-success` | color | Success / positive state |
| `--theme-warning` | color | Warning / caution state |
| `--theme-error` | color | Error / destructive state |
| `--theme-info` | color | Informational notice |
| `--theme-shadow-xs` | shadow | Subtle hover lift |
| `--theme-shadow-sm` | shadow | Small card / dropdown |
| `--theme-shadow-md` | shadow | Raised card / modal |
| `--theme-shadow-lg` | shadow | Overlay / dialog |
| `--theme-heading-font` | font | Display / headlines (h1–h3) |
| `--theme-body-font` | font | Body / UI default |
| `--theme-mono-font` | font | Code / pre |
| `--theme-text-display-xl` | text-size | Hero / landing display |
| `--theme-text-display-lg` | text-size | Page h1 |
| `--theme-text-display-md` | text-size | Section heading h2 |
| `--theme-text-title-lg` | text-size | Card title large |
| `--theme-text-title-md` | text-size | Card title default |
| `--theme-text-body-md` | text-size | Body / paragraph default |
| `--theme-text-body-sm` | text-size | Small body / nav |
| `--theme-text-caption` | text-size | Caption / overline |
| `--theme-leading-tight` | leading | Display / headings |
| `--theme-leading-normal` | leading | Body default |
| `--theme-leading-relaxed` | leading | Long-form content |
| `--theme-radius-xs` | radius | Chips, tags, small badges |
| `--theme-radius-sm` | radius | Buttons, inputs, tabs |
| `--theme-radius-md` | radius | Cards, panels |
| `--theme-radius-lg` | radius | Modals, images, blocks |
| `--theme-radius-xl` | radius | Hero / large feature cards |
| `--theme-radius-full` | radius | Pills, avatars (9999px) |
| `--theme-space-xxs` | spacing | Ultra tight (4px) |
| `--theme-space-xs` | spacing | Tight (8px) |
| `--theme-space-sm` | spacing | Small (12px) |
| `--theme-space-md` | spacing | Default (16px) |
| `--theme-space-lg` | spacing | Large (24px) |
| `--theme-space-xl` | spacing | Extra large (32px) |
| `--theme-space-xxl` | spacing | Section padding (48px) |
| `--theme-space-section` | spacing | Hero / page section (96px) |
| `--theme-container-width` | layout | Default width for container element (clamped by max-width:100%). Legacy alias: --theme-container-max-width |