mosaic-headless 1.11.0 → 1.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mosaic-headless",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "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/sites/_moksa.py

@@ -340,17 +340,40 @@ RULER_TICKS = 13
 
 # The hero's code layer. Third table up here for the same reason as the others:
 # motion_css() builds a rule per line and runs long before the section that uses it.
+# Four columns, four languages, all of them real work from this studio's own stack:
+# a FastAPI handler, a Tailwind component, a Vite config, and the Node path that
+# ties them together. Lines are kept short deliberately - the layer is full bleed,
+# and a long line would have to be clipped mid-word, which reads as a mistake rather
+# than as a background.
 HERO_CODE = [
-    "const order = await prisma.order.findUnique({",
-    "  where: { id }, include: { items: true },",
-    "})",
-    "",
-    "await n8n.trigger('order.paid', {",
-    "  invoice: await ecpay.issue(order),",
-    "  notify:  await line.push(order.customerId, flex(order)),",
-    "})",
-    "",
-    "return reply.code(200).send({ ok: true })",
+    ("PY", [
+        '@app.post("/orders/{id}/paid")',
+        "async def paid(id: str):",
+        "    o = await repo.get(id)",
+        '    await tasks("invoice", o)',
+        '    return {"ok": True}',
+    ]),
+    ("TSX", [
+        "<section",
+        '  className="grid gap-6',
+        '             md:grid-cols-3">',
+        "  <Card {...order} />",
+        "</section>",
+    ]),
+    ("VITE", [
+        "export default defineConfig({",
+        "  plugins: [react()],",
+        "  build: { target: 'es2022' },",
+        "  server: { port: 5173 },",
+        "})",
+    ]),
+    ("JS", [
+        "const o = await prisma.order",
+        "  .findUnique({ where: { id } })",
+        "await n8n.trigger('order.paid')",
+        "await line.push(o.customerId)",
+        "await ecpay.issue(o)",
+    ]),
 ]
 
 
@@ -447,15 +470,33 @@ def motion_css():
     # the snippet is drawn by pseudo-elements: no text nodes, so it stays out of
     # the accessibility tree where decorative type belongs
     code_lines = "\n".join(
-        "#mk-code-%d::after{content:%s;display:block;min-height:1.75em}"
-        % (i, json.dumps(line or " "))
-        for i, line in enumerate(HERO_CODE))
+        "#mk-code-c%d-l%d::after{content:%s;display:block;min-height:1.78em}"
+        % (c, i, json.dumps(line or " "))
+        for c, (_l, lines) in enumerate(HERO_CODE)
+        for i, line in enumerate(lines))
+    code_heads = "\n".join(
+        "#mk-code-c%d-h::after{content:%s;display:block;font-size:9px;"
+        "letter-spacing:.2em;color:rgba(255,90,54,.9);margin-bottom:9px}"
+        % (c, json.dumps(label))
+        for c, (label, _lines) in enumerate(HERO_CODE))
+    code_cursors = "\n".join(
+        "#mk-code-c%d-cur{width:6px;height:11px;margin-top:4px;"
+        "background:rgba(255,90,54,.7)}" % c
+        for c in range(len(HERO_CODE)))
     # one period for the block; each line waits its turn, and the steps() count is
     # the line's own length so the caret lands on characters rather than sliding
+    # Each column shares the period but starts a beat later, so the four are
+    # never writing the same line at the same moment; within a column the
+    # steps() count is the line's own length, which is what lands the caret on
+    # characters instead of sliding it between them.
     code_typing = "\n".join(
-        "  #mk-code-%d{animation:mk-typeline 15s steps(%d,end) %dms infinite}"
-        % (i, max(len(line), 1), 300 + i * 340)
-        for i, line in enumerate(HERO_CODE))
+        "  #mk-code-c%d-l%d{animation:mk-typeline 15s steps(%d,end) %dms infinite}"
+        % (c, i, max(len(line), 1), 240 + c * 430 + i * 300)
+        for c, (_l, lines) in enumerate(HERO_CODE)
+        for i, line in enumerate(lines))
+    code_cur_anim = "\n".join(
+        "  #mk-code-c%d-cur{animation:mk-boot-caret .62s steps(1,end) %dms "
+        "infinite}" % (c, c * 150) for c in range(len(HERO_CODE)))
     # the diagram's arrows, and the delay that makes the pulse travel down it
     flow_arrows = ",".join("#mk-ar-%s-%d>*" % (c, i)
                            for i in range(len(FLOW)) for c in ("a", "b"))
@@ -602,19 +643,47 @@ def motion_css():
         # statistics band, and code running across a number reads as a bug rather
         # than as a background. `max-height` is what guarantees it can never grow
         # back into them.
-        "#mk-code{position:absolute;top:86px;right:0;z-index:0;"
-        "pointer-events:none;width:max-content;max-height:292px;overflow:hidden;"
-        "display:grid;align-content:start;justify-items:start;row-gap:1px;"
-        "font-family:" + MONO + ";font-size:12px;line-height:1.72;"
-        "letter-spacing:0.01em;color:rgba(22,24,28,.10);"
-        "white-space:pre;text-align:left}",
+        # Full bleed. The opacity here has been wrong in both directions: a single
+        # column at 10% ran through the statistics and read as a bug, and four
+        # columns at 5.5% behind a 30% mask floor were so faint they may as well
+        # not have been there. 18% with the mask floor at 55% puts the layer at
+        # roughly 1.6:1 under the headline and 2.4:1 out to the right - legible as
+        # code if you look at it, and still an order of magnitude below the
+        # statistics, which sit at 17:1. The mask stays asymmetric on purpose:
+        # lightest where the headline is, fullest where nothing else is.
+        "#mk-code{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;"
+        "pointer-events:none;overflow:hidden;display:grid;"
+        "grid-template-columns:repeat(4,minmax(0,1fr));column-gap:26px;"
+        "align-content:center;padding:70px 0;"
+        "font-family:" + MONO + ";font-size:11.5px;line-height:1.78;"
+        "letter-spacing:0.01em;color:rgba(22,24,28,.18);"
+        "white-space:pre;text-align:left;"
+        "-webkit-mask-image:linear-gradient(96deg,rgba(0,0,0,.55) 0%,"
+        "rgba(0,0,0,.55) 26%,rgba(0,0,0,1) 58%,rgba(0,0,0,1) 100%);"
+        "mask-image:linear-gradient(96deg,rgba(0,0,0,.55) 0%,"
+        "rgba(0,0,0,.55) 26%,rgba(0,0,0,1) 58%,rgba(0,0,0,1) 100%)}",
+        "#mk-code>*{align-self:start;overflow:hidden}",
+        # The two blocks the code would otherwise run behind carry their own paper,
+        # so raising the layer's opacity cannot cost the page its readability. The
+        # texture still shows everywhere else in the hero - between the columns,
+        # above the lede, and all the way down the right - which is most of it.
+        # No border and no shadow: this is the page's own ground showing through,
+        # not a card laid on top of it.
+        "#mk-mast-lede{background:rgb(250,250,247);"
+        "padding:6px 18px 6px 0;margin-left:-2px}",
+        "#mk-mast-side{background:rgb(250,250,247);padding:0 0 0 14px;"
+        "margin-left:-14px}",
+        code_heads,
+        code_cursors,
         # everything else in the masthead sits above it
         "#mk-mast-in>*:not(#mk-code){position:relative;z-index:1}",
         code_lines,
         "#mk-code-cur{width:7px;height:13px;background:rgba(255,90,54,.30)}",
-        # Below 1280 the spec column claims that corner, so the layer stands down
-        # rather than fighting it for the space.
-        "@media (max-width:1279px){#mk-code{display:none}}",
+        # Two columns where there is room for two, and none on a phone - a
+        # texture you have to scroll past is not a texture.
+        "@media (max-width:1279px){#mk-code{"
+        "grid-template-columns:repeat(2,minmax(0,1fr));font-size:10.5px}}",
+        "@media (max-width:767px){#mk-code{display:none}}",
 
         # ── the clock ────────────────────────────────────────────────────────
         # Two registered integers, stepped rather than eased, so each one lands on a
@@ -1149,9 +1218,13 @@ HERO_LINE = dict(color={"token": "--mk-ink"}, fontSize="62px", fontWeight="600",
 # anyway and report it as DECORATIVE_TEXT, because "invisible to my own checker" is
 # not the same as "fine".
 
-CODE_LAYER = box("mk-code", {}, [box("mk-code-%d" % i, {}, [])
-                                 for i in range(len(HERO_CODE))]
-                                + [box("mk-code-cur", {}, [])])
+CODE_LAYER = box("mk-code", {}, [
+    box("mk-code-c%d" % c, {},
+        [box("mk-code-c%d-h" % c, {}, [])]
+        + [box("mk-code-c%d-l%d" % (c, i), {}, []) for i in range(len(lines))]
+        + [box("mk-code-c%d-cur" % c, {}, [])])
+    for c, (_label, lines) in enumerate(HERO_CODE)
+])
 
 MASTHEAD = section("mk-mast", [wrap("mk-mast-in", [
     CODE_LAYER,