@rizom/site-rizom-ai 0.2.0-alpha.261 → 0.2.0-alpha.262

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rizom/site-rizom-ai",
-  "version": "0.2.0-alpha.261",
+  "version": "0.2.0-alpha.262",
   "description": "Consolidated Rizom brand site, runtime, layouts, and chrome",
   "type": "module",
   "exports": {

package/src/story/runtime.ts

@@ -214,13 +214,26 @@ export const storyRuntimeScript: string = `(function () {
       });
       return rows.length ? rows[rows.length - 1] : null;
     }
+    // A point is in view when no scrolling ancestor hides it and it is on screen.
+    function inView(element, middle) {
+      if (middle < 0 || middle > innerHeight) return false;
+      var parent = element.parentElement;
+      while (parent && parent !== document.body) {
+        var overflow = getComputedStyle(parent).overflowY;
+        if (overflow === "auto" || overflow === "scroll") {
+          var area = parent.getBoundingClientRect();
+          if (middle < area.top || middle > area.bottom) return false;
+        }
+        parent = parent.parentElement;
+      }
+      return true;
+    }
     function drawLeads() {
       if (!leadsLayer) return;
       while (leadsLayer.firstChild) leadsLayer.removeChild(leadsLayer.firstChild);
       if (narrow.matches || !askHost) return;
-      // The layer's own box is the frame: coordinates are its, whatever positions it.
-      var frame = leadsLayer.getBoundingClientRect();
-      leadsLayer.setAttribute("viewBox", "0 0 " + frame.width + " " + frame.height);
+      // The layer is fixed to the viewport, so viewport coordinates are its own.
+      leadsLayer.setAttribute("viewBox", "0 0 " + innerWidth + " " + innerHeight);
       Object.keys(sourceBrain).forEach(function (key) {
         var mark = homeMarks.filter(function (m) { return m.getAttribute("data-brain") === sourceBrain[key]; })[0];
         var row = listedRow(askHost, key);
@@ -228,11 +241,12 @@ export const storyRuntimeScript: string = `(function () {
         var from = row.getBoundingClientRect();
         if (!from.height) return;
         var to = mark.getBoundingClientRect();
-        var x1 = from.right + GAP - frame.left;
-        var y1 = from.top + from.height / 2 - frame.top;
-        var toward = to.left + to.width / 2 - frame.left;
+        var y1 = from.top + from.height / 2;
+        var y2 = to.top + to.height / 2;
+        if (!inView(row, y1) || !inView(mark, y2)) return;
+        var x1 = from.right + GAP;
+        var toward = to.left + to.width / 2;
         var x2 = toward > x1 ? toward - GLYPH : toward + GLYPH;
-        var y2 = to.top + to.height / 2 - frame.top;
         var bend = Math.max(40, Math.abs(x2 - x1) / 2);
         var lead = document.createElementNS(SVG, "path");
         lead.setAttribute("data-lead", key);

package/src/story.css

@@ -784,6 +784,35 @@
   width: min(100%, calc(100svh - var(--bar-height, 4.6rem) - 2rem));
   aspect-ratio: 1;
 }
+/* On a wide screen the opening's drawing keeps its place beside the words
+   while the opening is read, an answer included, and leaves with the opening;
+   it fades once the reading has moved the figure on, as on a phone. In flow
+   with no height, so the words do not move; its width is the room right of
+   the words, as the absolute layer's was. */
+@media not all and (max-width: 60rem) {
+  :where(.chapter--opening) > .net-layer {
+    position: sticky;
+    order: -1;
+    top: calc(
+      var(--bar-height, 4.6rem) + (100svh - var(--bar-height, 4.6rem)) / 2
+    );
+    height: 0;
+    margin-left: calc(var(--words) + var(--words-gap));
+    width: calc(
+      100cqi - max(0px, (100cqi - 80rem) / 2) - clamp(1rem, 5vw, 5rem) -
+        var(--words) - var(--words-gap) - clamp(1rem, 6vw, 7rem)
+    );
+    transition: opacity 0.6s ease;
+  }
+  :where(.chapter--opening) > .net-layer > * {
+    translate: 0 -50%;
+  }
+  .story:has(.figure:not([data-stage="0"]))
+    :where(.chapter--opening)
+    > .net-layer {
+    opacity: 0;
+  }
+}
 .net-svg {
   overflow: visible;
 }
@@ -1158,6 +1187,14 @@
   --ask-display: var(--font-display);
   --ask-muted: var(--color-text-light);
 }
+/* The page is the one scroller beside the drawing: the conversation grows in
+   the opening instead of scrolling inside a band under the lede. */
+.opening__ask:not([data-ask-sheet]) .brain-box-scroll {
+  max-height: none;
+  overflow: visible;
+  mask-image: none;
+  padding-bottom: 0;
+}
 .ask__topics {
   list-style: none;
   margin: 1rem 0 0;
@@ -1422,12 +1459,13 @@
    the first item of its scroll, a slot holding its place meanwhile, and a
    tapped dot flashes its source. */
 .net-leads {
-  position: absolute;
+  /* Leads join words to the drawing across the page, so the viewport is
+     their frame; the runtime draws them in viewport coordinates. */
+  position: fixed;
   inset: 0;
   z-index: 2;
-  width: 100%;
-  height: 100%;
-  /* The chapter is the words' width; a lead runs past it to the drawing. */
+  width: 100vw;
+  height: 100vh;
   overflow: visible;
   pointer-events: none;
 }