mosaic-headless 1.24.0 → 1.25.1

package/data/slider-verification.csv

@@ -1,19 +1,19 @@
 slider,check,result,detail
-"hero, 4 slides, plain",HOST,PASS,"<mosaic-slider> animation=slide carousel=None, 4 slides"
-"hero, 4 slides, plain",TRACK,PASS,<mosaic-slider-slides> aria-live=off
-"hero, 4 slides, plain",HAS_CURRENT,PASS,slide 0 is current at rest
-"hero, 4 slides, plain",BULLET_TEMPLATE,PASS,"4 bullets for 4 slides, all with id='sl-main-nav-dot' - one authored bullet is repeated per slide, duplicate ids included"
-"hero, 4 slides, plain",BULLET_ARIA,PASS,"role=button tabindex=0 labels=一、輪播不是相簿, 二、四種動畫, 三、箭頭會自己消失, 四、不想動就不動 - taken from each slide's own title"
-"hero, 4 slides, plain",ADVANCES,PASS,reached 4 of 4 slides unaided
-"hero, 4 slides, plain",AUTOPLAY_DECLARED,PASS,data-autoplay=true delay=3600
-"hero, 4 slides, plain",BULLET_GOES,PASS,bullet 0 -> slide 0
-"hero, 4 slides, plain",ARROW_ENDS,PASS,"on slide 0 prev hides itself (hidden=True), next does not (hidden=False)"
-"hero, 4 slides, plain",TRACK_LAYOUT,PASS,"grid ""slide"", every slide one track wide ([1200] vs 1200)"
-"hero, 4 slides, plain",ARROW_ARIA,PASS,role=button tabindex=0 label='下一張投影片'
-"hero, 4 slides, plain",NEXT,PASS,slide 0 -> 1
-"hero, 4 slides, plain",PREV,PASS,slide 1 -> 0
-"hero, 4 slides, plain",KEYBOARD,PASS,"focus bullet 3 taken, Enter -> slide 3"
-"hero, 4 slides, plain",REDUCED,PASS,under prefers-reduced-motion it holds still (slide 0 -> 0)
+"hero, 4 slides, carousel",HOST,PASS,"<mosaic-slider> animation=slide carousel=true, 4 slides"
+"hero, 4 slides, carousel",TRACK,PASS,<mosaic-slider-slides> aria-live=off
+"hero, 4 slides, carousel",HAS_CURRENT,PASS,slide 0 is current at rest
+"hero, 4 slides, carousel",BULLET_TEMPLATE,PASS,"4 bullets for 4 slides, all with id='sl-main-nav-dot' - one authored bullet is repeated per slide, duplicate ids included"
+"hero, 4 slides, carousel",BULLET_ARIA,PASS,"role=button tabindex=0 labels=一、輪播不是相簿, 二、四種動畫, 三、箭頭會自己消失, 四、不想動就不動 - taken from each slide's own title"
+"hero, 4 slides, carousel",ADVANCES,PASS,reached 4 of 4 slides unaided
+"hero, 4 slides, carousel",AUTOPLAY_DECLARED,PASS,data-autoplay=true delay=3600
+"hero, 4 slides, carousel",BULLET_GOES,PASS,bullet 0 -> slide 0
+"hero, 4 slides, carousel",ARROW_ENDS,PASS,"carousel: it wraps, so neither arrow hides (prev hidden=False, next hidden=False)"
+"hero, 4 slides, carousel",CAROUSEL_LAYOUT,PASS,"grid ""slide"", every slide still one track wide ([1200] vs 1200) - isCarousel wraps the ends, it does not show more than one"
+"hero, 4 slides, carousel",ARROW_ARIA,PASS,role=button tabindex=0 label='下一張投影片'
+"hero, 4 slides, carousel",NEXT,PASS,slide 0 -> 1
+"hero, 4 slides, carousel",PREV,PASS,slide 1 -> 0
+"hero, 4 slides, carousel",KEYBOARD,PASS,"focus bullet 3 taken, Enter -> slide 3"
+"hero, 4 slides, carousel",REDUCED,PASS,under prefers-reduced-motion it holds still (slide 0 -> 0)
 "carousel, 6 slides, wraps",HOST,PASS,"<mosaic-slider> animation=slide carousel=true, 6 slides"
 "carousel, 6 slides, wraps",TRACK,PASS,<mosaic-slider-slides> aria-live=off
 "carousel, 6 slides, wraps",HAS_CURRENT,PASS,slide 0 is current at rest

package/data/token-verification.csv

@@ -0,0 +1,16 @@
+check,result,detail
+ROOT_PRESENT,PASS,9 custom properties on :root matching '--mk-'
+NO_DUPLICATES,PASS,every property declared once
+NO_EMPTY,PASS,every token has a value
+NOT_DEFAULT_WHITE,PASS,none
+ALL_COLOUR_TOKENS_USED,PASS,all 9 colour tokens are resolved by at least one element
+NON_COLOUR_TOKENS,PASS,"3 not judged by colour (they are numbers or lengths): --mk-m=0, --mk-n=0, --mk-s=0"
+USED/--mk-accent,PASS,"5 element(s), e.g. mk-progress-track, mk-progress, mk-clock-dot"
+USED/--mk-accent-ink,PASS,"2 element(s), e.g. mk-header-cta, tk-chip-mk-accent-ink"
+USED/--mk-ai,PASS,"1 element(s), e.g. tk-chip-mk-ai"
+USED/--mk-faint,PASS,"1 element(s), e.g. tk-chip-mk-faint"
+USED/--mk-ink,PASS,"76 element(s), e.g. mk-clock-m, mk-clock-m, mk-clock-s"
+USED/--mk-muted,PASS,"1 element(s), e.g. tk-chip-mk-muted"
+USED/--mk-panel,PASS,"3 element(s), e.g. tk-sw, tk-chip-mk-panel, tk-props"
+USED/--mk-paper,PASS,"7 element(s), e.g. tk-head, tk-chip-mk-paper, tk-pipe"
+USED/--mk-rule,PASS,"1 element(s), e.g. tk-chip-mk-rule"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mosaic-headless",
-  "version": "1.24.0",
+  "version": "1.25.1",
   "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

@@ -128,3 +128,35 @@ this (they are gitignored - they were scaffolding, not a deliverable) — they s
 everything
 per node, because their job was to exercise the style compiler across eight visual
 languages, not to model a maintainable theme. A real site inverts that ratio.
+
+## A grouped menu, and two more places the placement table lied
+
+Nine flat links in a header is what happens when a site grows and nobody re-reads
+the nav. Mosaic's `dropdown` family is the fix and is worth knowing for its own
+sake:
+
+```
+dropdown                      horizontalAlign: left | center | right
+  dropdown-toggle             url, target, rel; takes the label as children
+  dropdown-wrapper            takes the links as children
+```
+
+Both children are inserted by `onHeal()` if you leave them out, so only the two
+need authoring. **It opens on CLICK, not hover** — the host gains
+`dropdown--opening dropdown--opened` and the wrapper goes from `display:none` to
+`display:flex`. A hover test reports a dropdown that does not work.
+
+`dropdown-wrapper` reads as a leaf in `placement-rules.csv`, because `rule` is the
+`canBeParentFor()` answer and that method is never overridden on it. But its
+factory is `getDropdownWrapperElementDefaultData($data, $children)` and the editor
+fills it. "Will the editor let me drop this here" is not the same question as "can
+this hold children", and a build guard that reads only the first refuses correct
+structures — it refused this menu. `extract_placement.py` now also records
+`takes_children` from the factory signature, and `build_page.py` reads it.
+
+That is the second table to be caught short the same way this week. The first was
+`default-children.csv`, which held only the declared `getDefaultData()` statics and
+so knew nothing about children a type HEALS into itself — modal's overlay, loop's
+`loop-items`, slider's `slider-slides`, dropdown's own two. Both fixes are the same
+move: the question the table answers was narrower than the question the table's
+name suggests, so read the other source as well and say which is which.

package/references/responsive.md

@@ -172,3 +172,56 @@ scores its own blind spots as successes is worse than no tool.
   responsive behaviour you want checked.
 
 The tool tells you the values arrived. Only the browser tells you they add up.
+
+## Five ways a page passes the width check and is still broken on a phone
+
+`verify_navigation.py --viewports` asks one question — does the document scroll
+sideways — and a page can pass it while being unusable. `tools/audit_mobile.py`
+asks the rest, re-opening each page at every width and reporting WIDE, OUTSIDE,
+CLIPPED, TINY_TYPE, SMALL_TARGET, GRID_NOT_COLLAPSED and LONG_MEASURE. Run on the
+five showcase pages it found all five of the following, none of which the width
+check could see.
+
+**`flexSizing: {"type": "grow"}` is `flex-grow:1; flex-shrink:0`.** It is not
+`flex: 1`. A value column set with it can grow but can never give ground, so one
+long mono string in a 310px card pushed the whole document out to 440px — and the
+page still "did not scroll sideways", because the document itself had simply become
+wider. The four types compile as:
+
+| type | emitted |
+|---|---|
+| `none` | `flex-grow:0; flex-shrink:0` |
+| `shrink` | `flex-grow:0; flex-shrink:1` |
+| `grow` | `flex-grow:1; flex-shrink:0` |
+| `custom` | whichever of `flexGrow` / `flexShrink` you set |
+
+So an item that must both fill and yield needs `custom` with both set to `1`.
+
+**A grid or flex item defaults to `min-width: auto`, which means min-content.** A
+code block in `white-space: pre` has a min-content width of its longest LINE, so
+the track refuses to shrink and the grid overflows its container. `overflow: auto`
+on the block does not help — the item ABOVE it is what is too wide. `minWidth: 0`
+on the item is the fix.
+
+**`section` arrives with 80px of vertical padding.** It is invisible until a page
+adds its own spacing, and then every band carries 80 + 80 + yours; the showcase
+pages opened with about 200px of nothing. `section()` in the demo now takes a
+`pad_y` so a page can take that rhythm into its own hands.
+
+**A fixed header's height is not a constant.** The demo's nav grew from four items
+to nine as pages were added; on a phone it wrapped to two rows and took the fixed
+header to 177px, with the first 97px of every page hidden underneath it, because
+the pages cleared a height decided when it was one line. Below 768px the header
+simply joins the flow now, which removes the whole class of bug.
+
+**A type scale needs a floor, not just a ramp.** 10px mono labels are part of the
+hierarchy on a large screen and illegible on a phone; the audit found 80 runs of
+them on one page. The demo's `mono()` raises anything under 12px at `_t` — which
+is `<=1079px`, so it covers the tablet too, where a 768px touch device was still
+being served desktop values.
+
+`data/mobile-audit.csv` is the standing result. Three classes in it are accepted
+rather than fixed, and are worth stating so they are not re-opened: the footer link
+list is deliberately two columns, the slider bullets are 26x28 (a secondary control
+below the 30px the tool asks for), and LONG_MEASURE flags CJK lines over 42
+characters, which at 768px is a preference rather than a defect.

package/references/styling.md

@@ -201,9 +201,23 @@ type-switched group, `flexSizing`:
 "flexSizing": {"type": "custom", "customOptions": {…}}
 ```
 
-`none` is what you want for a label column that must not be squeezed, and `grow`
-for the cell that takes the slack — the pair that `flex-shrink:0` / `flex-grow:1`
-would have been.
+**`grow` carries `flex-shrink:0`, so it is not `flex: 1`.** An item set with it
+grows but never yields, and one long string then pushes its whole container wider
+than the viewport — which is a bug a horizontal-overflow check does not catch,
+because the document simply becomes wider rather than scrolling. The emitted CSS:
+
+| type | emitted |
+|---|---|
+| `none` | `flex-grow:0; flex-shrink:0` |
+| `shrink` | `flex-grow:0; flex-shrink:1` |
+| `grow` | `flex-grow:1; flex-shrink:0` |
+| `custom` | whichever of `flexGrow` / `flexShrink` you set |
+
+`none` is right for a label column that must not be squeezed. For the cell that
+takes the slack AND has to give ground on a phone, `custom` with both set to `1`
+is the only type that says so. Pair it with `minWidth: 0`, because a flex or grid
+item defaults to `min-width: auto` — min-content — and a `white-space: pre` block
+inside one will hold the track open at its longest line.
 
 **There is no `overflowX` or `overflowY`** — only the shorthand `overflow`, with
 `visible | hidden | clip | scroll | auto`. One axis at a time is not expressible

package/scripts/check-release.mjs

@@ -100,7 +100,9 @@ const counts = {
   "data/custom-fields-verification.csv": 62,
   "data/dialog-verification.csv": 19,
   "data/slider-verification.csv": 30,
-  "data/navigation-verification.csv": 46,
+  "data/token-verification.csv": 15,
+  "data/mobile-audit.csv": 54,
+  "data/navigation-verification.csv": 22,
   "data/page-modal-verification.csv": 19,
   "data/interaction-rules-verification.csv": 17,
   "data/dialog-form-verification.csv": 49,

package/sites/_moksa.py

@@ -110,13 +110,24 @@ def grid(attr, cols, gap, children, tcols=None, mcols=1, **extra):
             "children": children}
 
 
-def section(attr, children, bg="--mk-paper"):
-    """Sections carry no vertical padding here - the document's rhythm is set by the
-    rules between clauses, not by a stack of padded bands."""
+def section(attr, children, bg="--mk-paper", pad_y=None):
+    """A band of the document.
+
+    The comment here used to say sections carry no vertical padding. They do:
+    `section` arrives with 80px top and bottom of its own, which is Mosaic's
+    default and is what sets this page's rhythm. It is invisible until a page adds
+    its own spacing on top, and then every band on a phone carries 80 + 80 + your
+    own - the showcase pages opened with about 200px of nothing above the first
+    line. Pass `pad_y` to take the vertical rhythm into your own hands.
+    """
+    base = {"backgroundColor": {"token": bg},
+            "paddingLeft": "40px", "paddingRight": "40px",
+            "fontFamily": CJK}
+    if pad_y is not None:
+        base["paddingTop"] = pad_y
+        base["paddingBottom"] = pad_y
     return {"type": "section", "data": {"attrID": attr},
-            "style": bp({"backgroundColor": {"token": bg},
-                         "paddingLeft": "40px", "paddingRight": "40px",
-                         "fontFamily": CJK},
+            "style": bp(base,
                         {"paddingLeft": "28px", "paddingRight": "28px"},
                         {"paddingLeft": "18px", "paddingRight": "18px"}),
             "children": children}
@@ -139,11 +150,30 @@ def ml(tag, text, **st):
     return T(tag, text, **st)
 
 
+# Below this, mono text stops being quiet and starts being unreadable - on a phone
+# in particular, where there is no leaning in. The audit at 390px found 80 runs at
+# 10px on one page alone, which is a decision taken 80 times by accident.
+MONO_FLOOR_M = 12
+
+
 def mono(text, size="11px", color="--mk-muted", track="0.14em", **st):
     """The page's primary voice. Everything that is a label, a key, a figure or an
-    address is set in it."""
+    address is set in it.
+
+    A size authored below `MONO_FLOOR_M` is raised to it on phones. The desktop
+    value is left alone: 10px works at arm's length on a large screen and is part
+    of the typographic hierarchy there, so this is a floor rather than a rewrite.
+    """
     st.setdefault("fontFamily", MONO)
     st.setdefault("fontWeight", "400")
+    try:
+        authored = float(str(size).replace("px", ""))
+    except ValueError:
+        authored = None
+    if authored is not None and authored < MONO_FLOOR_M:
+        t = dict(st.get("_t") or {})
+        t.setdefault("fontSize", "%dpx" % MONO_FLOOR_M)
+        st["_t"] = t
     return T("p", text,
              color={"token": color} if color.startswith("--") else color,
              fontSize=size, letterSpacing=track, **st)
@@ -247,9 +277,40 @@ def mask_line(attr, text, tag="h1", **st):
 
 
 # ── content, all of it Moksa Web's own ───────────────────────────────────────
+# Nine flat links was the wrong answer to "the site grew". The top level is the
+# studio's own site; everything that demonstrates what Mosaic can DO is one
+# labelled group, which is also the only honest shape - those five pages are a
+# set, not five more sections of the homepage.
 NAV = [("服務", "#services"), ("作品", "#works"),
-       ("產品", "#products"), ("彈窗", "/dialogs/"), ("輪播", "/sliders/"),
-       ("聯絡", "#contact")]
+       ("產品", "#products"), ("聯絡", "#contact")]
+
+# Read from the shipped tables rather than typed, so the menu cannot claim a
+# number the evidence no longer supports.
+def _count(table, fn):
+    import csv as _c, io as _i, os as _o
+    path = _o.path.join(_o.path.dirname(_o.path.abspath(__file__)), "..", "data", table)
+    with _i.open(path, encoding="utf-8") as fh:
+        return fn(list(_c.DictReader(fh)))
+
+
+TOKENABLE_COUNT = _count("style-properties.csv",
+                         lambda rs: sum(1 for r in rs if r["tokenable"]))
+CONVERTED_COUNT = _count("conversion-batch.csv",
+                         lambda rs: sum(int(r["converted"]) for r in rs))
+
+# label, href, one line of what it demonstrates
+CAPABILITIES = [
+    ("彈窗與觸發", "/dialogs/",
+     "九種形態、四種觸發、四種執行規則"),
+    ("輪播", "/sliders/",
+     "四種動畫並排、輪轉模式、鍵盤與減少動態"),
+    ("設計系統", "/tokens/",
+     "設計代幣、variant 層、%d 個接得住代幣的屬性" % TOKENABLE_COUNT),
+    ("動態內容", "/dynamic/",
+     "迴圈、@VAR 表達式、自訂欄位"),
+    ("Elementor 轉換", "/conversion/",
+     "19 頁、%s 個元素、每一段字都核過" % "{:,}".format(CONVERTED_COUNT)),
+]
 
 # key / figure / caption, read as a datasheet rather than as four big numbers
 SPEC = [
@@ -611,6 +672,17 @@ def motion_css():
         "-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}",
         '#mk-header::after{content:"";position:absolute;left:0;right:0;bottom:0;'
         "height:1px;background:" + RULE + ";opacity:0}",
+        # On a phone the bar is no longer one line. The nav grew to nine items
+        # and wraps to two rows, which took the FIXED header to 177px - a quarter
+        # of the viewport permanently, with the first 97px of every page hidden
+        # underneath it, because the pages clear a header height that was decided
+        # when it was one line. A fixed element whose height depends on its
+        # content cannot be cleared by a constant, so below 768px it simply joins
+        # the flow and the problem cannot come back.
+        "@media (max-width:767px){#mk-header{position:static;"
+        "background:rgb(250,250,247);"
+        "-webkit-backdrop-filter:none;backdrop-filter:none;"
+        "border-bottom:1px solid " + RULE + "}}",
         "#mk-nav>*{position:relative}",
         '#mk-nav>*::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;'
         "height:1px;background:rgb(255,90,54);"
@@ -1281,6 +1353,76 @@ def motion_css():
 
 
 # ── the shared shell ──────────────────────────────────────────────────────────
+NAV_LINK = {"color": {"token": "--mk-ink"}, "fontSize": "13px",
+            "fontWeight": "400", "letterSpacing": "0.04em", "fontFamily": MONO,
+            "cursor": "pointer"}
+
+
+def capability_dropdown():
+    """The capability pages as one labelled group.
+
+    `dropdown` heals in its own `dropdown-toggle` and `dropdown-wrapper`, so only
+    the two are authored here and the wrapper's children are the links. The
+    wrapper reads as a leaf in `placement-rules.csv` because `canBeParentFor()`
+    is never overridden on it - but its factory is
+    `getDropdownWrapperElementDefaultData($data, $children)`, which is why that
+    table now carries a `takes_children` column and the build guard reads it.
+    """
+    return {"type": "dropdown",
+            "data": {"attrID": "mk-cap", "horizontalAlign": "left"},
+            "style": {"&": {"_": {"position": "relative"}}},
+            "children": [
+                {"type": "dropdown-toggle",
+                 "data": {"attrID": "mk-cap-toggle"},
+                 "style": {"&": {"_": dict(NAV_LINK, **{
+                     "display": "flex", "alignItems": "center", "columnGap": "6px",
+                     "customDeclarations":
+                         "white-space:nowrap;"}),
+                     "_t": {"fontSize": "12px", "paddingTop": "8px",
+                            "paddingBottom": "8px"}},
+                     "hover": {"_": {"color": {"token": "--mk-accent"}}},
+                     "focus-visible": {"_": dict(FOCUS_RING)}},
+                 "children": [
+                     T("p", "能力展示", 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"},
+                 "style": bp({"backgroundColor": {"token": "--mk-paper"},
+                              "paddingTop": "10px", "paddingBottom": "10px",
+                              "minWidth": "272px",
+                              "customDeclarations":
+                                  "border:1px solid rgb(22,24,28);"
+                                  "box-shadow:0 20px 48px rgba(22,24,28,.14);"},
+                             None,
+                             {"minWidth": "0px", "width": "100%",
+                              "customDeclarations":
+                                  "border:1px solid " + RULE + ";box-shadow:none;"}),
+                 "children": [
+                     {"type": "menu-link",
+                      "data": {"attrID": "mk-cap-%d" % i, "url": href},
+                      "style": {"&": {"_": {
+                          "display": "block", "cursor": "pointer",
+                          "paddingTop": "9px", "paddingBottom": "9px",
+                          "paddingLeft": "16px", "paddingRight": "16px"}},
+                          "hover": {"_": {
+                              "backgroundColor": {"token": "--mk-panel"}}},
+                          "focus-visible": {"_": dict(FOCUS_RING)}},
+                      "children": [
+                          T("p", label, fontFamily=CJK, fontSize="13px",
+                            fontWeight="500", color={"token": "--mk-ink"}),
+                          T("p", blurb, fontFamily=CJK, fontSize="11px",
+                            lineHeight="1.6", color={"token": "--mk-muted"},
+                            marginTop="3px"),
+                      ]}
+                     for i, (label, href, blurb) in enumerate(CAPABILITIES)
+                 ]},
+            ]}
+
+
 HEADER = box("mk-shell-top", {}, [
     # a `code` node with insertLocation "head" is the only way to get @keyframes into
     # the document - customDeclarations is emitted inside a rule and cannot hold one
@@ -1298,9 +1440,17 @@ HEADER = box("mk-shell-top", {}, [
         children=
         [wrap("mk-header-in", [
             {"type": "div", "data": {"attrID": "mk-header-row"},
+             # The nav grew from four items to seven as the showcase pages were
+             # added, and on a phone the row simply ran off the right edge - the
+             # last two links sat at left=393 and left=436 in a 390px viewport,
+             # which is to say they were unreachable. One line is not a layout
+             # that survives new content, so on `_m` the row wraps and the nav
+             # takes the second line to itself.
              "style": bp({"display": "flex", "alignItems": "center",
                           "justifyContent": "space-between", "columnGap": "40px"},
-                         {"columnGap": "24px"}, {"columnGap": "12px"}),
+                         {"columnGap": "24px"},
+                         {"columnGap": "12px", "flexWrap": "wrap",
+                          "rowGap": "10px"}),
              "children": [
                  # the wordmark is the only route back to the top on a one-pager, so
                  # it has to be a link. `menu-link` with a url renders a real <a>.
@@ -1319,7 +1469,7 @@ HEADER = box("mk-shell-top", {}, [
                  # time of day - a page cannot know that without JavaScript, and
                  # labelling a page-load counter "14:32" would be a small lie told
                  # in the most trustworthy typeface on the site.
-                 box("mk-clock", {}, [
+                 box("mk-clock", {}, _m={"display": "none"}, children=[
                      box("mk-clock-dot", {}, []),
                      T("p", "T+", color={"token": "--mk-faint"}, fontSize="10px",
                        fontFamily=MONO, letterSpacing="0.18em"),
@@ -1331,7 +1481,14 @@ HEADER = box("mk-shell-top", {}, [
                  {"type": "menu", "data": {"attrID": "mk-nav"},
                   "style": bp({"display": "flex", "columnGap": "30px",
                                "alignItems": "center"},
-                              {"columnGap": "20px"}, {"columnGap": "15px"}),
+                              {"columnGap": "20px", "flexWrap": "wrap",
+                               "rowGap": "6px"},
+                              {"columnGap": "16px", "rowGap": "6px",
+                               "flexWrap": "wrap", "width": "100%",
+                               "justifyContent": "flex-start",
+                               "customDeclarations":
+                                   "order:3;border-top:1px solid " + RULE
+                                   + ";padding-top:10px;"}),
                   "children": [
                       {"type": "menu-link",
                        "data": {"attrID": "mk-nav-%d" % i, "url": href},
@@ -1341,12 +1498,14 @@ HEADER = box("mk-shell-top", {}, [
                                              "fontFamily": MONO,
                                              "transitionAll": "160ms ease",
                                              "cursor": "pointer"},
-                                       "_m": {"fontSize": "12px"}},
+                                       "_t": {"fontSize": "12px",
+                                              "paddingTop": "8px",
+                                              "paddingBottom": "8px"}},
                                  "hover": {"_": {"color": {"token": "--mk-accent"}}},
                                  "focus-visible": {"_": FOCUS_RING}},
                        "text": text}
                       for i, (text, href) in enumerate(NAV)
-                  ]},
+                  ] + [capability_dropdown()]},
                  # not a pill: a bracketed link, the way a document cross-references
                  {"type": "button", "data": {"attrID": "mk-header-cta",
                                              "url": "#contact"},
@@ -3059,6 +3218,18 @@ if __name__ == "__main__":
     # helpers it reads are pure functions - two copies produce identical dicts.
     import _dialogs
     import _sliders
+    import _tokens
+    import _dynamic
+    import _conversion
+    SITE["pages"].append({"slug": "conversion", "post_id": 273,
+                          "title": "Elementor 轉換",
+                          "tree": apply_type(_conversion.TREE, DISPLAY, CJK, "600")})
+    SITE["pages"].append({"slug": "dynamic", "post_id": 272,
+                          "title": "動態內容",
+                          "tree": apply_type(_dynamic.TREE, DISPLAY, CJK, "600")})
+    SITE["pages"].append({"slug": "tokens", "post_id": 271,
+                          "title": "設計系統",
+                          "tree": apply_type(_tokens.TREE, DISPLAY, CJK, "600")})
     SITE["pages"].append({"slug": "sliders", "post_id": 270,
                           "title": "輪播實驗室",
                           "tree": apply_type(_sliders.TREE, DISPLAY, CJK, "600")})