mosaic-headless 1.25.0 → 1.26.0

package/references/design-system.md

@@ -128,3 +128,71 @@ 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.
+
+## Component states live on the element the selector names
+
+Two of Mosaic's component states read as a parent/child pair and only one of them
+is about the component itself:
+
+```
+___tab--active                &.m-tab--active          the tab
+___tab--active___descendants  .m-tab--active &         anything inside it
+___slider_navigation_bullet--active   &.m-slider-bullet--active
+___slide--active                      .m-slide--active > &
+___arrow_hidden                       &:where(.m-slider-arrow--hidden)
+```
+
+`___tab--active___descendants` compiles with `&` in the DESCENDANT position, so it
+must be committed on the child node. Put it on the tab and it reads "a descendant
+of an active tab that is also that tab", which matches nothing — the plugin
+darkens the active tab, the label keeps the colour you gave it, and the current
+tab is ink on ink. Measured both ways; the fix is to style the label node, not
+the tab.
+
+The same shape governs `___slide--active` (`.m-slide--active > &`, so it goes on
+the slide's content) and the slider bullet's own `--active`, which is what turns a
+row of identical hairlines into a position indicator.
+
+## What `openstreetmap` is called
+
+`latitude`, `longitude`, `zoom`, `layer`, `lazyLoad` — not `lat` / `lon`. An
+unknown property name is dropped without a word and the element falls back to its
+default centre, which is Times Square: a map that renders, looks deliberate, and
+is in the wrong hemisphere. The three coordinate properties take
+`ValidatorDynamicCodeObject`, so the `{"v": "…"}` object form.
+
+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`.

package/scripts/check-release.mjs

@@ -101,8 +101,9 @@ const counts = {
   "data/dialog-verification.csv": 19,
   "data/slider-verification.csv": 30,
   "data/token-verification.csv": 15,
-  "data/mobile-audit.csv": 54,
-  "data/navigation-verification.csv": 27,
+  "data/mobile-audit.csv": 58,
+  "data/component-wall-verification.csv": 11,
+  "data/navigation-verification.csv": 24,
   "data/page-modal-verification.csv": 19,
   "data/interaction-rules-verification.csv": 17,
   "data/dialog-form-verification.csv": 49,

package/sites/_moksa.py

@@ -277,9 +277,42 @@ 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/"), ("系統", "/tokens/"), ("資料", "/dynamic/"), ("轉換", "/conversion/"),
-       ("聯絡", "#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 = [
+    ("元件牆", "/components/",
+     "分頁、手風琴、表單、地圖——都能直接操作"),
+    ("彈窗與觸發", "/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 = [
@@ -1322,6 +1355,80 @@ 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": "right"},
+            "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,
+                             # NOT width:100% - that is 100% of the toggle-sized
+                             # host, and the panel came out 79px wide and 1124px
+                             # tall. A fixed width, right-aligned, fits 390px.
+                             {"minWidth": "0px", "width": "296px",
+                              "customDeclarations":
+                                  "border:1px solid rgb(22,24,28);"
+                                  "box-shadow:0 18px 40px rgba(22,24,28,.16);"}),
+                 "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
@@ -1404,7 +1511,7 @@ HEADER = box("mk-shell-top", {}, [
                                  "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"},
@@ -3117,6 +3224,10 @@ if __name__ == "__main__":
     # helpers it reads are pure functions - two copies produce identical dicts.
     import _dialogs
     import _sliders
+    import _components
+    SITE["pages"].append({"slug": "components", "post_id": 281,
+                          "title": "元件",
+                          "tree": apply_type(_components.TREE, DISPLAY, CJK, "600")})
     import _tokens
     import _dynamic
     import _conversion