mosaic-headless 1.3.0 → 1.5.0

package/references/interactions.md

@@ -68,16 +68,61 @@ Confirmed from it:
   it is a percentage of the scroll range, not milliseconds.
 - **`easing` is defaulted to `ease`** by the server.
 
-## What is NOT solved
+## What is NOT solved - and exactly how far it now goes
 
-**Property binding.** `propertyMetas` and per-keyframe `properties` did not survive
-into the payload in any shape tried: flat array of metas, metas nested one level
-deeper (which made the whole interaction vanish), properties as an object, properties
-as an array. The keyframes arrive with timing but with nothing to animate.
+`tools/sweep_interactions.py` commits candidate shapes to a live page and judges each
+against `var mosaicInteractions` in the delivered HTML **and** against the row read
+back out of the database, with negative controls. Results in
+`data/interaction-verification.csv`.
 
-Do not ship an interaction animation on the strength of this page. Use the CSS path,
-or drive the editor once by hand and read the stored row back out of `wp_mosaic_nodes`
-— that row is the authoritative example, and one look at it would settle the shape.
+**`propertyMetas` is NOT the problem, and the previous claim here was wrong.** It is
+accepted, stored, and keeps its order:
+
+```json
+"propertyMetas": [{"uuid": "<uuid>", "type": "predefined", "timelineKey": "_",
+                   "predefinedOptions": {"name": "opacity"}}]
+```
+
+`type` is one of `predefined | custom | static | collectionMode | collectionVariable
+| display`; the options key is that type plus `Options`
+(`KeyframePropertyMetaTypeFactoryAbstract::getPropertyMetaOptionsDataName()`), and
+for `predefined` the `name` is the property itself - the full list is
+`data/animatable-properties.csv`.
+
+**`uuid` is optional on create and REQUIRED on update.** `DataArray::initValues`
+mints one when it is missing, but `DataArray::applyCommitData` matches existing items
+by uuid and rebuilds `order` from `array_column($new, 'uuid')` - so on any later
+commit an item without a uuid is not matched, not carried into the new order, and
+disappears. Measured both ways: the same shape stored 1 meta on create and 0 after an
+update.
+
+**What still does not bind is `initial` and the keyframes' `properties`.** Four
+attempts, each with the row read back:
+
+| attempt | result |
+|---|---|
+| one commit carrying metas + values | metas stored, 0 property values |
+| second commit adding the values | metas stored, 0 property values |
+| second commit that also REORDERS the metas, so `propertyMetas/order` genuinely changes | reorder took effect in storage, still 0 property values |
+| the values written **straight into `wp_mosaic_nodes`**, all caches flushed | still absent from the payload |
+
+That last row is the informative one: it rules out the trust model, the commit
+validators and the cache. The gate is in the export itself -
+`KeyframePropertiesDataSub::exportForInteraction()` will only emit a property for
+which `$this->hasSubData($name)` is true, and those descriptors exist only where
+`AnimationActionOptionsDataSubAbstract::syncAttachedPropertyMetas()` has created
+them, on a shared `DataMeta` that starts empty every time the object is constructed.
+
+So the honest position is: **the envelope, the trigger, the timeline and the property
+metas can all be written headlessly; the property VALUES have not been.** Use the CSS
+path, which is fully verified - see `data/style-state-verification.csv`, where 36 of
+37 probed states compiled to exactly the selector the table promises.
+
+The one experiment left, and it is cheap: author a single interaction in the editor,
+then `SELECT data FROM wp_mosaic_nodes` for that node. One look settles it.
+
+**`pointerEnter` produced no `mosaicInteractions` entry at all**, so the timed family
+needs something the progress family does not - also unfinished.
 
 ## The failure mode that makes this hard
 

package/sites/_moksa.py

@@ -72,10 +72,22 @@ def T(tag, text, _t=None, _m=None, **st):
             "style": bp(st, _t, _m) if (st or _t or _m) else None}
 
 
-def box(attr, style, children, hover=None, _t=None, _m=None):
+# The keyboard is a state too.
+#
+# `focus-visible` was verified by sweep_style_states.py to compile to
+# `.M_EL<n>:FOCUS-VISIBLE` - note the UPPERCASE pseudo-class Mosaic emits, which is
+# why grepping a delivered stylesheet for ":focus-visible" finds nothing at all. Of
+# the seven globally usable states this page used exactly one, `hover`, which means
+# every route through it was invisible to anyone not using a mouse.
+FOCUS_RING = {"customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"}
+
+
+def box(attr, style, children, hover=None, focus=None, _t=None, _m=None):
     s = bp(style, _t, _m) or {"&": {"_": {}}}
     if hover:
         s["hover"] = {"_": hover}
+    if focus:
+        s["focus-visible"] = {"_": focus}
     return {"type": "div", "data": {"attrID": attr}, "style": s, "children": children}
 
 
@@ -364,6 +376,10 @@ def motion_css():
                           for i, (_g, items) in enumerate(STACK)
                           for j in range(len(items)))
     marks = ",".join("#mk-mark-%d" % i for i in range(4))
+    # the boot list lights one clause at a time
+    boot_stagger = "\n".join(
+        "  #mk-boot-c%d{animation-delay:%dms}" % (i, 260 + i * 120)
+        for i in range(len(CLAUSES)))
     # a named view timeline per section, declared on the section and consumed by its
     # index entry - `timeline-scope` on #mk-doc is what lets the name cross between
     # two elements that are not ancestor and descendant
@@ -516,21 +532,94 @@ def motion_css():
         "@media (max-width:1079px){#mk-cue{right:28px}}",
         "@media (max-width:767px){#mk-cue{right:18px;bottom:16px}}",
 
+        # ── the entrance sequence ────────────────────────────────────────────
+        # A page-load animation has one catastrophic failure mode: an overlay that
+        # covers the document and never leaves. So the veil is `display:none` in the
+        # BASE rule and is only switched on inside the motion query, alongside the
+        # animation that removes it. If motion is reduced, or the query never matches,
+        # or the stylesheet is truncated, the overlay does not exist at all - the
+        # failure direction is "no intro", never "no page".
+        "#mk-boot{display:none}",
+        # An integer that can be animated, and read back out of the element - which
+        # is what makes the counter verifiable rather than merely visible.
+        # `inherits:true` is load-bearing, and the reason is not obvious. The
+        # animation runs on #mk-boot-num, but the digits are drawn by its ::after
+        # through `counter(n)`. With `inherits:false` the pseudo-element never sees
+        # the animated value: measured mid-run, --mk-n was 18 on the element and 0
+        # on its ::after, so the counter sat at 0 for the whole sequence while the
+        # property underneath it animated perfectly.
+        "@property --mk-n{syntax:'<integer>';initial-value:0;inherits:true}",
+        "@keyframes mk-count{to{--mk-n:100}}",
+        "@keyframes mk-boot-out{"
+        "0%{clip-path:inset(0 0 0 0)}"
+        "100%{clip-path:inset(0 0 100% 0);visibility:hidden}}",
+        "@keyframes mk-boot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}",
+        "@keyframes mk-boot-line{from{opacity:.14}"
+        "60%{opacity:1;color:rgb(255,90,54)}to{opacity:.55;color:rgb(107,109,113)}}",
+        "@keyframes mk-boot-scan{from{transform:translateY(0)}"
+        "to{transform:translateY(100vh)}}",
+        "@keyframes mk-boot-fade{from{opacity:0}to{opacity:1}}",
+
         # ── motion, all of it opt-out-able ───────────────────────────────────
         "@media (prefers-reduced-motion:no-preference){",
+        "  #mk-boot{display:grid;position:fixed;inset:0;z-index:999;"
+        "background:rgb(250,250,247);align-content:center;justify-items:center;"
+        "row-gap:22px;overflow:hidden;"
+        "animation:mk-boot-out .5s cubic-bezier(.7,0,.3,1) 1.55s forwards}",
+        "  #mk-boot-head,#mk-boot-foot{position:absolute;left:40px;right:40px;"
+        "display:flex;justify-content:space-between;font-family:" + MONO + ";"
+        "font-size:10px;letter-spacing:.2em;color:rgb(107,109,113);"
+        "animation:mk-boot-fade .4s ease both}",
+        "  #mk-boot-head{top:34px}",
+        "  #mk-boot-foot{bottom:30px;animation-delay:.1s}",
+        "  #mk-boot-num{font-family:" + MONO + ";font-size:96px;font-weight:500;"
+        "line-height:1;letter-spacing:-.04em;color:rgb(22,24,28);"
+        "font-variant-numeric:tabular-nums;min-width:3ch;text-align:right;"
+        "animation:mk-count 1.2s cubic-bezier(.3,0,0,1) .12s both}",
+        '  #mk-boot-num::after{counter-reset:n var(--mk-n);content:counter(n)}',
+        "  #mk-boot-row{display:flex;align-items:flex-end;column-gap:8px;"
+        "line-height:1}",
+        # the darkened cut, not the fill orange: 18px of rgb(255,90,54) on paper is
+        # 2.97:1 and the design audit refuses it. The progress rule beside it keeps
+        # the bright colour, because a 1px hairline is not text.
+        "  #mk-boot-pct{font-family:" + MONO + ";font-size:18px;"
+        "color:rgb(191,68,40);padding-bottom:12px}",
+        "  #mk-boot-track{width:min(420px,62vw);height:1px;"
+        "background:rgba(22,24,28,.14);position:relative}",
+        "  #mk-boot-fill{position:absolute;inset:0;background:rgb(255,90,54);"
+        "transform-origin:0 50%;"
+        "animation:mk-boot-fill 1.2s cubic-bezier(.3,0,0,1) .12s both}",
+        "  #mk-boot-list{display:flex;column-gap:18px;row-gap:8px;"
+        "flex-wrap:wrap;justify-content:center;font-family:" + MONO + ";"
+        "font-size:10px;letter-spacing:.18em}",
+        "  #mk-boot-list>*{opacity:.14;"
+        "animation:mk-boot-line .5s ease both}",
+        boot_stagger,
+        "  #mk-boot::before{content:\"\";position:absolute;inset:0;"
+        "background:"
+        "repeating-linear-gradient(90deg,rgba(22,24,28,.045) 0 1px,"
+        "transparent 1px 72px),"
+        "repeating-linear-gradient(0deg,rgba(22,24,28,.045) 0 1px,"
+        "transparent 1px 72px);"
+        "animation:mk-boot-fade .5s ease both}",
+        "  #mk-boot-scan{position:absolute;left:0;right:0;top:0;height:1px;"
+        "background:linear-gradient(90deg,rgba(255,90,54,0),rgba(255,90,54,.55),"
+        "rgba(255,90,54,0));animation:mk-boot-scan 1.6s linear .1s both}",
+        "  @media (max-width:767px){#mk-boot-num{font-size:62px}"
+        "#mk-boot-head,#mk-boot-foot{left:18px;right:18px}}",
         "  #mk-hl1-mask>*,#mk-hl2-mask>*{transform:translateY(112%);"
         "animation:mk-linein .95s cubic-bezier(.16,1,.3,1) forwards}",
-        "  #mk-hl1-mask>*{animation-delay:.2s}",
-        "  #mk-hl2-mask>*{animation-delay:.32s}",
+        "  #mk-hl1-mask>*{animation-delay:1.72s}",
+        "  #mk-hl2-mask>*{animation-delay:1.84s}",
         "  #mk-mast-meta,#mk-mast-lede,#mk-mast-cta{opacity:0;"
         "animation:mk-softin .8s cubic-bezier(.16,1,.3,1) forwards}",
-        "  #mk-mast-meta{animation-delay:.06s}",
-        "  #mk-mast-lede{animation-delay:.66s}",
-        "  #mk-mast-cta{animation-delay:.78s}",
+        "  #mk-mast-meta{animation-delay:1.62s}",
+        "  #mk-mast-lede{animation-delay:2.10s}",
+        "  #mk-mast-cta{animation-delay:2.22s}",
         "  #mk-caret{animation:mk-caret 1.15s steps(1,end) infinite;"
-        "animation-delay:.95s}",
+        "animation-delay:2.4s}",
         "  #mk-mast-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;"
-        "animation-delay:.44s}",
+        "animation-delay:1.96s}",
         "  #mk-spec-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;"
         "animation-delay:.9s}",
         "  #mk-cue{opacity:0;animation:mk-softin .8s ease forwards;"
@@ -632,7 +721,8 @@ HEADER = box("mk-shell-top", {}, [
                                              "transitionAll": "160ms ease",
                                              "cursor": "pointer"},
                                        "_m": {"fontSize": "12px"}},
-                                 "hover": {"_": {"color": {"token": "--mk-accent"}}}},
+                                 "hover": {"_": {"color": {"token": "--mk-accent"}}},
+                                 "focus-visible": {"_": FOCUS_RING}},
                        "text": text}
                       for i, (text, href) in enumerate(NAV)
                   ]},
@@ -656,7 +746,8 @@ HEADER = box("mk-shell-top", {}, [
                                                    "color": "rgb(255,90,54)"},
                                         "transitionAll": "180ms ease"}},
                             "hover": {"_": {"backgroundColor": {"token": "--mk-accent"},
-                                            "color": {"token": "--mk-ink"}}}},
+                                            "color": {"token": "--mk-ink"}}},
+                            "focus-visible": {"_": FOCUS_RING}},
                   "text": "START A PROJECT"},
              ]}
         ])]),
@@ -790,6 +881,7 @@ MASTHEAD = section("mk-mast", [wrap("mk-mast-in", [
                                "border-bottom-color:rgb(22,24,28);"},
               fontSize="13px", fontFamily=MONO, letterSpacing="0.1em",
               radius="0px", cursor="pointer", transitionAll="180ms ease")},
+                    "focus-visible": {"_": FOCUS_RING},
                     "hover": {"_": ({"backgroundColor": {"token": "--mk-ink"},
                                      "customStyles": "border:1px solid rgb(22,24,28);"}
                                     if n == 1
@@ -937,7 +1029,15 @@ STACK_SEC = section("stack", [wrap("mk-stack-in", [
                     {"display": "grid", "gridCols": "160px 1fr", "columnGap": "24px",
                      "alignItems": "baseline",
                      "paddingTop": "18px", "paddingBottom": "18px",
-                     "customStyles": "border-top:1px solid " + RULE + ";"},
+                     # Each row arrives on its own, staggered by pushing its
+                     # animation-range further down the scroll rather than by a
+                     # delay: a scroll-driven animation has no clock to delay
+                     # against, so the offset has to live in the range.
+                     "customStyles":
+                         "border-top:1px solid " + RULE + ";"
+                         "animation:mk-rise both;animation-timeline:view();"
+                         "animation-range:entry %d%% cover %d%%;"
+                         % (2 + i * 4, 18 + i * 4)},
                     _m={"gridCols": "1fr", "rowGap": "10px",
                         "paddingTop": "16px", "paddingBottom": "16px"},
                     children=[
@@ -1161,6 +1261,40 @@ CONTACT = section("contact", [wrap("mk-contact-in", [
         ]),
 ])])
 
+# ── the entrance sequence ─────────────────────────────────────────────────────
+# A boot screen, because the page is a specification document and this is what one
+# looks like while it is being read off a machine. It is CSS only: a counter that is
+# a real animated integer (`@property --mk-n`), a rule that fills with it, the seven
+# clauses reporting in one at a time, and a scan line. Then the whole panel clips
+# upward and is gone.
+#
+# Every id here is deliberate. `verify_intro.py` samples them over the first seconds
+# of the page's life, which is the only window in which any of this exists.
+BOOT = box("mk-boot", {}, [
+    box("mk-boot-scan", {}, []),
+    box("mk-boot-head", {}, [
+        mono("MOKSA WEB — STUDIO PROFILE", size="10px", color="--mk-faint",
+             track="0.2em"),
+        mono("REV. 2026.09", size="10px", color="--mk-faint", track="0.2em"),
+    ]),
+    box("mk-boot-row", {}, [
+        box("mk-boot-num", {}, []),
+        box("mk-boot-pct", {}, [T("p", "%")]),
+    ]),
+    box("mk-boot-track", {}, [box("mk-boot-fill", {}, [])]),
+    box("mk-boot-list", {},
+        # each clause gets its own box because the id is what the stagger
+        # targets, and `mono()` puts everything it is given into the style
+        [box("mk-boot-c%d" % i, {},
+             [mono("§" + num + " " + name, size="10px", color="--mk-faint",
+                   track="0.18em")])
+         for i, (num, name, _h, _t) in enumerate(CLAUSES)]),
+    box("mk-boot-foot", {}, [
+        mono("INITIALISING", size="10px", color="--mk-faint", track="0.2em"),
+        mono("TAICHUNG, TW", size="10px", color="--mk-faint", track="0.2em"),
+    ]),
+])
+
 # Registration marks. A spec sheet is a printed object and these are how one is
 # trimmed; here they simply say the page has edges that were decided.
 MARKS = box("mk-marks", {}, [box("mk-mark-%d" % i, {}, []) for i in range(4)])
@@ -1176,7 +1310,8 @@ INDEX = box("mk-index", {}, [
                            "fontFamily": MONO, "fontSize": "10px",
                            "letterSpacing": "0.14em",
                            "transitionAll": "220ms ease"}},
-               "hover": {"_": {"color": {"token": "--mk-ink"}}}},
+               "hover": {"_": {"color": {"token": "--mk-ink"}}},
+               "focus-visible": {"_": FOCUS_RING}},
      "text": "§" + num + "  " + name}
     for i, (num, name, href, _tl) in enumerate(CLAUSES)
 ])
@@ -1187,7 +1322,7 @@ CUE = box("mk-cue", {}, [
 ])
 
 HOME_TREE = {"type": "div", "data": {"attrID": "mk-home"},
-             "children": [box("mk-doc", {}, [
+             "children": [BOOT, box("mk-doc", {}, [
                  MARKS, INDEX, CUE,
                  MASTHEAD, TICKER_BAND, SERVICE_SEC, PROCESS_SEC, WORK_SEC,
                  STACK_SEC, PRODUCT_SEC, VOICE_SEC, CONTACT,