mosaic-headless 1.27.0 → 1.29.0

package/SKILL.md

@@ -4,7 +4,7 @@ description: |
   Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface with `mo.py`, which joins every source table to the live sweeps so a lookup leads with the measured verdict rather than the declaration (128 node types, 191 properties, 98 style properties with 20 structured value shapes pinned down, 53 style states, 156 variants, 74 dynamic variables, 15 interaction triggers, 115 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, the design-token and element-class layers verified against compiled CSS, the @VAR() dynamic language verified against rendered output, nine designed pages built through the tables themselves, and the delivered pages re-read in Chromium at three viewports so a rule that is present, correct and still wrong cannot pass. Drives Mosaic's own theme export/import and its plugin data upgrade from outside the editor and holds the copy against the source tree for tree. Measured on Mosaic Pro 1.0.9: the modal (`<dialog>`), OpenStreetMap, the exit-intent and scroll-depth triggers, run rules and the memory actions all built on a live page and read back, and the 1.0.7 -> 1.0.8 -> 1.0.9 migrations driven from outside wp-admin.
 license: "MIT"
 author: "moksa (https://moksaweb.com)"
-version: "1.27.0"
+version: "1.29.0"
 ---
 
 # Headless Mosaic
@@ -535,9 +535,10 @@ so the pattern is in the data, not just in this paragraph.
 | `data/dialog-verification.csv` | 19 | **driven live** - the 1.0.9 modal, its triggers, its run rules and the memory actions, each exercised in a real browser |
 | `data/dialog-form-verification.csv` | 49 | **driven live** - the same three nodes made into five FORMS (sheet, drawer, corner, takeover, gate), each re-opened at 390px and 768px; also where `pickOne` on a click turned out to be a latch rather than a lottery |
 | `data/token-verification.csv` | 15 | **driven live** - every `:root` custom property declared once, non-empty, and resolved by something on the page; a token nothing points at is a token that is not working |
-| `data/mobile-audit.csv` | 60 | **driven live** - what a sideways-scroll check cannot see: type under the legible floor, controls too small to hit, a grid that never collapsed, content escaping its box |
-| `data/component-wall-verification.csv` | 13 | **driven live** - tabs switched, an accordion opened, a form's fields and Mosaic's own honeypot, and an OpenStreetMap asserted on the coordinates it was GIVEN rather than the default it falls back to |
-| `data/form-surface-verification.csv` | 8 | **driven live** - every field type Mosaic ships in one form: select with labelled options, radio and checkbox groups, file upload, and the browser's own validation refusing an empty submit |
+| `data/mobile-audit.csv` | 63 | **driven live** - what a sideways-scroll check cannot see: type under the legible floor, controls too small to hit, a grid that never collapsed, content escaping its box |
+| `data/component-wall-verification.csv` | 19 | **driven live** - tabs switched, an accordion opened, a form's fields and Mosaic's own honeypot, and an OpenStreetMap asserted on the coordinates it was GIVEN rather than the default it falls back to |
+| `data/form-surface-verification.csv` | 12 | **driven live** - every field type Mosaic ships in one form: select with labelled options, radio and checkbox groups, file upload, and the browser's own validation refusing an empty submit |
+| `data/content-loop-verification.csv` | 11 | **driven live** - a slider, a tab bar, a list and a paginated archive whose children all come from one authored template repeated per post; the pagination is clicked and the rows asserted to CHANGE |
 | `data/custom-fields-verification.csv` | 62 | **rendered live** - ACF and Meta Box fields of every common type read back through `@VAR` / `@LOOP` off the delivered page, loops included |
 | `data/theme-zip-verification.csv` | 22 | **round-tripped live** - Mosaic's own ZIP export imported in test mode and compared to its source, table by table and tree by tree |
 | `data/node-type-notes.csv` | 8 | where a sweep outcome is true but misleading on its own, why. Surfaced by `mo.py type` |

package/assets/templates/platforms/claude-ai.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.27.0"
+    "version": "1.29.0"
   },
   "loaderBehaviour": "Upload via Settings -> Skills -> Upload. Claude.ai parses SKILL.md frontmatter and surfaces the skill in your library. The extraction tool (extract-block-schema.php) needs a live WP-CLI connection and won't run in the sandbox; use it from a local terminal against your own site instead.",
   "uploadSteps": [

package/assets/templates/platforms/claude-code.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.27.0"
+    "version": "1.29.0"
   },
   "loaderBehaviour": "Auto-loads on session start when SKILL.md frontmatter parses successfully.",
   "verified": true,

package/assets/templates/platforms/codex-cli.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.27.0"
+    "version": "1.29.0"
   },
   "loaderBehaviour": "Confirmed (2026-07-11): Codex CLI natively supports the SKILL.md spec. Place SKILL.md under .codex/skills/<name>/ (project) or ~/.codex/skills/<name>/ (personal) and Codex loads the name+description at session start, then the full body on demand. A parallel, broader convention .agents/skills/ (searched from cwd up to repo root, then ~/.agents/skills/) also exists across multiple tools - if your Codex CLI version prioritizes that path instead, mirror the same SKILL.md there.",
   "verified": true,

package/assets/templates/platforms/copilot.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.27.0"
+    "version": "1.29.0"
   },
   "loaderBehaviour": "CHANGED as of 2026-07-11: GitHub Copilot added a proper '.github/skills/' Agent Skills directory (December 2025), alongside the older single-file .github/copilot-instructions.md convention. This config targets the new skills-directory form. If your Copilot version predates this (pre Dec 2025), use the instructions-append fallback instead (see fallback below).",
   "fallback": {

package/assets/templates/platforms/gemini-cli.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.27.0"
+    "version": "1.29.0"
   },
   "loaderBehaviour": "CHANGED as of 2026-07-11: Gemini CLI now natively supports the same SKILL.md standard as Claude Code and Codex CLI - the same directory-based skill works unmodified. Gemini CLI discovers skills in this precedence order: built-in, extension skills, ~/.gemini/skills/ (personal), .gemini/skills/ (project, shared via version control). At session start Gemini injects each discovered skill's name+description into the system prompt and calls activate_skill when a task matches.",
   "verified": true,

package/data/component-wall-verification.csv

@@ -10,5 +10,11 @@ FORM/required,PASS,required is set on 3 of them
 FORM/honeypot,PASS,"Mosaic adds its own spam trap: ['mosaic_hp_url', 'mosaic_hp_ts']"
 FORM/option_labels,SKIPPED,no select on this form
 FORM/required_blocks,PASS,"empty form reports invalid: ['name', 'email', 'message']"
+COMPONENT/instances,PASS,"3 instances: ['cs-0-cs-card', 'cs-1-cs-card', 'cs-2-cs-card']"
+COMPONENT/one_definition,PASS,"all share the generated class ['_fm'] - one definition, not 3 copies"
+COMPONENT/content_differs,PASS,"3 instances, 3 distinct bodies - the overrides are per-instance"
+LOOP/slider,SKIPPED,not on this page
+LOOP/tabs,SKIPPED,not on this page
+LOOP/pagination,SKIPPED,not on this page
 MAP/frame,PASS,renders an openstreetmap iframe
 MAP/coordinates_applied,PASS,"marker=24.147700,120.673600"

package/data/content-loop-verification.csv

@@ -0,0 +1,12 @@
+check,result,detail
+TABS,SKIPPED,not on this page
+ACCORDION,SKIPPED,not on this page
+FORM,SKIPPED,not on this page
+COMPONENT/instances,SKIPPED,fewer than two on this page
+LOOP/slider,PASS,6 slides from one authored slider-slide
+LOOP/tabs,PASS,4 tabs from one authored tabs-tab
+LOOP/tab_labels_intact,PASS,"no replacement characters - @substr counts bytes, so a length that is not a multiple of the encoding cuts a glyph in half"
+LOOP/pagination_links,PASS,"3 page links: ['v=16802&notes=1', 'v=16802&notes=2', 'v=16802&notes=3']"
+LOOP/pagination_key_is_safe,PASS,paginationKey does not collide with a WordPress query var
+LOOP/pagination_changes_rows,PASS,page 1 3 -> page 2 3
+MAP,SKIPPED,not on this page

package/data/form-surface-verification.csv

@@ -6,4 +6,8 @@ FORM/required,PASS,required is set on 8 of them
 FORM/honeypot,PASS,"Mosaic adds its own spam trap: ['mosaic_hp_url', 'mosaic_hp_ts']"
 FORM/option_labels,PASS,"5 options, all labelled"
 FORM/required_blocks,PASS,"empty form reports invalid: ['name', 'email', 'kind', 'kind']"
+COMPONENT/instances,SKIPPED,fewer than two on this page
+LOOP/slider,SKIPPED,not on this page
+LOOP/tabs,SKIPPED,not on this page
+LOOP/pagination,SKIPPED,not on this page
 MAP,SKIPPED,not on this page

package/data/mobile-audit.csv

@@ -1,7 +1,8 @@
 path,width,finding,element,detail
-forms/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 components/,390,GRID_NOT_COLLAPSED,cp-tabs-menu,2 columns at 390px
 components/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
+content/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
+forms/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 dialogs/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 sliders/,390,SMALL_TARGET,sl-main-nav-dot,34x28: 
 sliders/,390,SMALL_TARGET,sl-main-nav-dot,34x28: 
@@ -17,9 +18,11 @@ sliders/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 tokens/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 dynamic/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 conversion/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
-forms/,768,LONG_MEASURE,m-text,59 chars/line
 components/,768,LONG_MEASURE,m-text,44 chars/line
 components/,768,LONG_MEASURE,m-text,56 chars/line
+content/,768,LONG_MEASURE,m-text,43 chars/line
+content/,768,LONG_MEASURE,m-text,58 chars/line
+forms/,768,LONG_MEASURE,m-text,59 chars/line
 dialogs/,768,LONG_MEASURE,m-text,46 chars/line
 dialogs/,768,LONG_MEASURE,m-text,45 chars/line
 dialogs/,768,LONG_MEASURE,m-text,45 chars/line

package/data/navigation-verification.csv

@@ -1,23 +1,22 @@
 check,result,detail
-FRONT_PAGE,PASS,"HTTP 200, 240166 bytes"
-MENU_IS_LINKS,PASS,4 real <a href> in #mk-nav
-NAV 服務,PASS,"/#services -> HTTP 200, 240262 bytes"
-NAV 作品,PASS,"/#works -> HTTP 200, 240262 bytes"
-NAV 產品,PASS,"/#products -> HTTP 200, 240262 bytes"
-NAV 聯絡,PASS,"/#contact -> HTTP 200, 240262 bytes"
-PAGE moksa,PASS,"HTTP 200, 240166 bytes"
-PAGE my-account,PASS,"HTTP 200, 100372 bytes"
-PAGE intro,PASS,"HTTP 200, 134080 bytes"
-PAGE forms,PASS,"HTTP 200, 100299 bytes"
-PAGE components,PASS,"HTTP 200, 114860 bytes"
-PAGE conversion,PASS,"HTTP 200, 102160 bytes"
-PAGE dynamic,PASS,"HTTP 200, 112338 bytes"
-PAGE tokens,PASS,"HTTP 200, 124749 bytes"
-PAGE sliders,PASS,"HTTP 200, 151524 bytes"
-PAGE dialogs,PASS,"HTTP 200, 206683 bytes"
+FRONT_PAGE,PASS,"HTTP 200, 240831 bytes"
+MENU_IS_LINKS,PASS,1 real <a href> in #mk-nav
+NAV 首頁,PASS,"/ -> HTTP 200, 240830 bytes"
+PAGE moksa,PASS,"HTTP 200, 240830 bytes"
+PAGE my-account,PASS,"HTTP 200, 101036 bytes"
+PAGE intro,PASS,"HTTP 200, 134744 bytes"
+PAGE content,PASS,"HTTP 200, 102378 bytes"
+PAGE forms,PASS,"HTTP 200, 101343 bytes"
+PAGE components,PASS,"HTTP 200, 115524 bytes"
+PAGE conversion,PASS,"HTTP 200, 103202 bytes"
+PAGE dynamic,PASS,"HTTP 200, 112622 bytes"
+PAGE tokens,PASS,"HTTP 200, 125792 bytes"
+PAGE sliders,PASS,"HTTP 200, 151809 bytes"
+PAGE dialogs,PASS,"HTTP 200, 207347 bytes"
 ANCHORS moksa,PASS,every in-page link resolves
 ANCHORS my-account,PASS,every in-page link resolves
 ANCHORS intro,PASS,every in-page link resolves
+ANCHORS content,PASS,every in-page link resolves
 ANCHORS forms,PASS,every in-page link resolves
 ANCHORS components,PASS,every in-page link resolves
 ANCHORS conversion,PASS,every in-page link resolves
@@ -28,6 +27,7 @@ ANCHORS dialogs,PASS,every in-page link resolves
 WIDTH moksa,PASS,"no sideways scroll at 390,768,1280"
 WIDTH my-account,PASS,"no sideways scroll at 390,768,1280"
 WIDTH intro,PASS,"no sideways scroll at 390,768,1280"
+WIDTH content,PASS,"no sideways scroll at 390,768,1280"
 WIDTH forms,PASS,"no sideways scroll at 390,768,1280"
 WIDTH components,PASS,"no sideways scroll at 390,768,1280"
 WIDTH conversion,PASS,"no sideways scroll at 390,768,1280"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mosaic-headless",
-  "version": "1.27.0",
+  "version": "1.29.0",
   "description": "AI-agent skill: build Mosaic Pro (Nextend) WordPress sites by writing the underlying data model directly - 23 custom tables, no visual editor, no DOM. Every node type, style property and node property swept against a live install and asserted on the delivered HTML and compiled CSS. Installs into Claude Code, Cursor, Codex CLI, Gemini CLI, Copilot, Continue, Windsurf and Claude.ai.",
   "keywords": [
     "wordpress",

package/references/design-system.md

@@ -196,3 +196,33 @@ is in the wrong hemisphere. The three coordinate properties take
 The element is an `<iframe>` to openstreetmap.org, not a tile layer, so "how many
 tiles loaded" is unanswerable from the parent document — assert on the frame's
 `src`, which carries `marker=lat,lon`.
+
+## Component instances: one definition, many uses
+
+A component is a theme-level record; a page writes an INSTANCE of it and supplies
+only the slots that differ:
+
+```jsonc
+// the definition, once, in the site's `components` map
+"case-card": <tree with slot() text nodes>
+
+// an instance, on a page
+{"type": "div", "component": "case-card",
+ "data": {"attrID": "cs-0"},
+ "overrides": {"cs-kind": {"text": "E-COMMERCE"},
+               "cs-name": {"text": "…"}}}
+```
+
+**An instance's ids are prefixed with the instance's own attrID.** The definition's
+`cs-card` becomes `cs-0-cs-card`, `cs-1-cs-card`, and so on, so the definition's
+attrID is a SUFFIX in the delivered page and `getElementById` on it finds nothing.
+Address instances with `[id$="-cs-card"]`.
+
+The claim worth verifying is not that three cards rendered. It is that they are the
+same definition, and the evidence is in the class: all three carry the identical
+generated token (`_fm` here) while their text differs. Three copy-pasted sections
+would carry three tokens and three rules. `verify_components.py` asserts exactly
+that — and the first version of the check passed on three `null`s, because its
+regex contained a literal backspace: `\b` inside a non-raw Python string is 0x08,
+not a word boundary. An assertion that cannot fail is worse than no assertion, so
+the check now also refuses a token it could not read.

package/references/dynamic-content.md

@@ -111,3 +111,57 @@ attachment(2)  find_image(2)  find_link(2)  find_video(2)       media
 `sum`, `avg`, `concat` and `fallback` are variadic. `date()`'s timestamp argument is a
 true GMT Unix timestamp — pair it with `post/publish_timestamp_gmt`, not
 `publish_timestamp`, unless you want the local-time value re-interpreted as UTC.
+
+## A loop in place of a component's children
+
+Three component families take a loop INSTEAD of hand-authored children, which is
+the thing a page builder needs a plugin per component to do:
+
+```
+slider-slides > slider-loop-slides  > slider-slide      one slide per row
+tabs-menu     > tabs-loop-tabs      > tabs-tab
+tabs-content  > tabs-loop-tab-panes > tabs-tab-pane
+list          > list-loop-items     > list-item
+accordion     > accordion-loop-items> accordion-item
+```
+
+Each loop container carries the same three keys an ordinary `loop` does —
+`loopType`, `loopNamespace` and a `<loopType>Options` group — and the template
+inside reads its row with `@VAR('<namespace>/…')`. You author ONE slide, one tab,
+one row; the count comes from the content. The assertion that matters is therefore
+a COUNT: a template that failed to loop renders exactly once and looks correct.
+
+**`canBeParentFor` disagrees with the factory's own default data on these.**
+`SliderLoopSlidesElementTypeFactory::canBeParentFor()` returns true for
+`SliderSlidesElementTypeFactory` — the track, not the slide — while its
+`getDefaultData()` seeds itself with a `slider-slide`. `accordion-loop-items` says
+`accordion` the same way. The structure the editor actually builds is the second
+one. `build_page.py` resolves it by treating a loop container as standing in for
+its parent's children: what `slider-loop-slides` accepts is what `slider-slides`
+accepts.
+
+## `loop-pagination`, and the key you must not use
+
+```
+loop > loop-pagination > loop-pagination-button-previous
+                       > loop-pagination-numbers > loop-pagination-number
+                       > loop-pagination-button-next
+```
+
+`loop-pagination-number` is a TEMPLATE repeated per page, the same rule as a
+slider bullet — author one. `loop-pagination-numbers` takes `pagesBefore` /
+`pagesAfter` / `pagesStart` / `pagesEnd` to decide how much of a long range to
+show.
+
+**Do not set `paginationKey` to `p`.** It is one of WordPress's own reserved query
+vars, meaning "post ID": `?p=2` answers **HTTP 301** to post 2, so the visitor
+leaves the page entirely and the loop renders nothing. Measured. Any other key
+works — `?notes=2` on the demo pages the archive and changes all three rows.
+
+## `@substr` counts BYTES
+
+`@substr(@VAR('post/title'), 0, 14)` on a Han title cuts the fifth character in
+half and the output ends in U+FFFD. Lengths have to be a multiple of the encoding
+width — 18 for six three-byte characters — or the truncation has to be left to CSS.
+A count-based check cannot see this; `verify_components.py` looks for the
+replacement character directly.

package/scripts/check-release.mjs

@@ -101,9 +101,10 @@ const counts = {
   "data/dialog-verification.csv": 19,
   "data/slider-verification.csv": 30,
   "data/token-verification.csv": 15,
-  "data/mobile-audit.csv": 60,
-  "data/component-wall-verification.csv": 13,
-  "data/form-surface-verification.csv": 8,
+  "data/mobile-audit.csv": 63,
+  "data/component-wall-verification.csv": 19,
+  "data/form-surface-verification.csv": 12,
+  "data/content-loop-verification.csv": 11,
   "data/navigation-verification.csv": 36,
   "data/page-modal-verification.csv": 19,
   "data/interaction-rules-verification.csv": 17,

package/sites/_moksa.py

@@ -285,8 +285,11 @@ def mask_line(attr, text, tag="h1", **st):
 # bare `#services` is therefore a dead link on all seven of the others: the
 # browser looks for that id in the current document, does not find it, and does
 # nothing at all. Absolute, so they mean the same thing from anywhere.
-NAV = [("服務", "/#services"), ("作品", "/#works"),
-       ("產品", "/#products"), ("聯絡", "/#contact")]
+# The header used to be the studio site's own section anchors. On a demo whose
+# whole job is to show what Mosaic can do, those were four links that left the
+# showcase - so the menu IS the showcase now, and the one remaining top-level
+# link goes home.
+NAV = [("首頁", "/")]
 
 # Read from the shipped tables rather than typed, so the menu cannot claim a
 # number the evidence no longer supports.
@@ -302,8 +305,34 @@ TOKENABLE_COUNT = _count("style-properties.csv",
 CONVERTED_COUNT = _count("conversion-batch.csv",
                          lambda rs: sum(int(r["converted"]) for r in rs))
 
-# label, href, one line of what it demonstrates
+# Two groups, because eight flat links is the thing this menu was already fixed
+# for once. `label, href, one line of what it demonstrates`.
+CAPABILITY_GROUPS = [
+    ("介面元件", [
+        ("元件牆", "/components/",
+         "分頁、手風琴、表單、地圖——都能直接操作"),
+        ("表單", "/forms/",
+         "下拉、單選、複選、上傳、必填規則與錯誤訊息"),
+        ("輪播", "/sliders/",
+         "四種動畫並排、輪轉模式、鍵盤與減少動態"),
+        ("彈窗與觸發", "/dialogs/",
+         "九種形態、四種觸發、四種執行規則"),
+    ]),
+    ("資料與系統", [
+        ("內容驅動", "/content/",
+         "輪播、分頁、存檔——都由文章資料複製"),
+        ("動態內容", "/dynamic/",
+         "迴圈、@VAR 表達式、自訂欄位"),
+        ("設計系統", "/tokens/",
+         "設計代幣、variant 層、%d 個接得住代幣的屬性" % TOKENABLE_COUNT),
+        ("Elementor 轉換", "/conversion/",
+         "19 頁、%s 個元素、每一段字都核過" % "{:,}".format(CONVERTED_COUNT)),
+    ]),
+]
+
 CAPABILITIES = [
+    ("內容驅動", "/content/",
+     "輪播、分頁、存檔——都由文章資料複製"),
     ("表單", "/forms/",
      "下拉、單選、複選、上傳、必填規則與錯誤訊息"),
     ("元件牆", "/components/",
@@ -1366,7 +1395,7 @@ NAV_LINK = {"color": {"token": "--mk-ink"}, "fontSize": "13px",
             "cursor": "pointer"}
 
 
-def capability_dropdown():
+def capability_dropdown(key, title, entries):
     """The capability pages as one labelled group.
 
     `dropdown` heals in its own `dropdown-toggle` and `dropdown-wrapper`, so only
@@ -1377,11 +1406,11 @@ def capability_dropdown():
     table now carries a `takes_children` column and the build guard reads it.
     """
     return {"type": "dropdown",
-            "data": {"attrID": "mk-cap", "horizontalAlign": "right"},
+            "data": {"attrID": "mk-cap-" + key, "horizontalAlign": "right"},
             "style": {"&": {"_": {"position": "relative"}}},
             "children": [
                 {"type": "dropdown-toggle",
-                 "data": {"attrID": "mk-cap-toggle"},
+                 "data": {"attrID": "mk-cap-%s-toggle" % key},
                  "style": {"&": {"_": dict(NAV_LINK, **{
                      "display": "flex", "alignItems": "center", "columnGap": "6px",
                      "customDeclarations":
@@ -1391,14 +1420,14 @@ def capability_dropdown():
                      "hover": {"_": {"color": {"token": "--mk-accent"}}},
                      "focus-visible": {"_": dict(FOCUS_RING)}},
                  "children": [
-                     T("p", "能力展示", fontFamily=MONO,
+                     T("p", title, fontFamily=MONO,
                        fontSize="13px", letterSpacing="0.04em",
                        color={"token": "--mk-ink"}, _t={"fontSize": "12px"}),
                      T("p", "+", fontFamily=MONO, fontSize="11px",
                        color={"token": "--mk-faint"}),
                  ]},
                 {"type": "dropdown-wrapper",
-                 "data": {"attrID": "mk-cap-menu"},
+                 "data": {"attrID": "mk-cap-%s-menu" % key},
                  "style": bp({"backgroundColor": {"token": "--mk-paper"},
                               "paddingTop": "10px", "paddingBottom": "10px",
                               "minWidth": "272px",
@@ -1415,7 +1444,8 @@ def capability_dropdown():
                                   "box-shadow:0 18px 40px rgba(22,24,28,.16);"}),
                  "children": [
                      {"type": "menu-link",
-                      "data": {"attrID": "mk-cap-%d" % i, "url": href},
+                      "data": {"attrID": "mk-cap-%s-%d" % (key, i),
+                               "url": href},
                       "style": {"&": {"_": {
                           "display": "block", "cursor": "pointer",
                           "paddingTop": "9px", "paddingBottom": "9px",
@@ -1430,7 +1460,7 @@ def capability_dropdown():
                             lineHeight="1.6", color={"token": "--mk-muted"},
                             marginTop="3px"),
                       ]}
-                     for i, (label, href, blurb) in enumerate(CAPABILITIES)
+                     for i, (label, href, blurb) in enumerate(entries)
                  ]},
             ]}
 
@@ -1517,7 +1547,8 @@ HEADER = box("mk-shell-top", {}, [
                                  "focus-visible": {"_": FOCUS_RING}},
                        "text": text}
                       for i, (text, href) in enumerate(NAV)
-                  ] + [capability_dropdown()]},
+                  ] + [capability_dropdown("g%d" % gi, title, entries)
+                       for gi, (title, entries) in enumerate(CAPABILITY_GROUPS)]},
                  # not a pill: a bracketed link, the way a document cross-references
                  {"type": "button", "data": {"attrID": "mk-header-cta",
                                              "url": "/#contact"},
@@ -3230,11 +3261,19 @@ if __name__ == "__main__":
     # helpers it reads are pure functions - two copies produce identical dicts.
     import _dialogs
     import _sliders
+    import _content
+    SITE["pages"].append({"slug": "content", "post_id": 283,
+                          "title": "內容驅動",
+                          "tree": apply_type(_content.TREE, DISPLAY, CJK, "600")})
     import _forms
     SITE["pages"].append({"slug": "forms", "post_id": 282,
                           "title": "表單",
                           "tree": apply_type(_forms.TREE, DISPLAY, CJK, "600")})
     import _components
+    # the showcase page brings its own component definition; components are a
+    # theme-level record, so they have to join the site's map before build_site
+    # walks it
+    SITE["components"].update(_components.COMPONENTS)
     SITE["pages"].append({"slug": "components", "post_id": 281,
                           "title": "元件",
                           "tree": apply_type(_components.TREE, DISPLAY, CJK, "600")})