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

package/package.json

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

package/src/opening.tsx

@@ -7,6 +7,13 @@ import {
 import { ASK_BOX_SCRIPT_PATH } from "@brains/contracts";
 import { StructuredContentFormatter } from "@brains/content-formatters";
 import { AskBoxHost } from "@brains/site-atlas";
+import {
+  ASK_COLUMN_ATTRIBUTE,
+  ASK_DRAWING_ATTRIBUTE,
+  ASK_LEADS_ATTRIBUTE,
+  ASK_MARK_ATTRIBUTE,
+  ASK_ROOM_ATTRIBUTE,
+} from "@brains/contracts";
 import { createTemplate, type Template } from "@brains/templates";
 import { z } from "@rizom/site";
 import { placeNetwork, type PlacedBrain } from "./story/network";
@@ -48,11 +55,19 @@ const replyDelay = (reach: number, after = 0): string =>
 export function NetworkLayer({
   brains,
   kin,
-}: ReturnType<typeof placeNetwork>): JSX.Element | null {
+  lendable = false,
+}: ReturnType<typeof placeNetwork> & {
+  /** The Ask room lends this drawing to a phone's open conversation (the opening's; a chapter's stays put). */
+  lendable?: boolean;
+}): JSX.Element | null {
   if (brains.length === 0) return null;
   const byId = new Map(brains.map((brain) => [brain.id, brain]));
   return (
-    <div className="net-layer" aria-hidden="true">
+    <div
+      className="net-layer"
+      aria-hidden="true"
+      {...(lendable ? { [ASK_DRAWING_ATTRIBUTE]: "" } : {})}
+    >
       <svg className="net-svg" viewBox="0 0 100 100">
         {[14.7, 29.3, 44].map((r) => (
           <circle key={r} className="net-ring" cx="50" cy="50" r={r} />
@@ -125,6 +140,7 @@ export function NetworkLayer({
             key={brain.id}
             className="net-mark"
             data-brain={brain.id}
+            {...{ [ASK_MARK_ATTRIBUTE]: brain.id }}
             style={{ left: `${brain.x}%`, top: `${brain.y}%` }}
           >
             <a href={`/agents/${brain.id}`} aria-label={brain.name}>
@@ -153,45 +169,66 @@ export function Opening(data: OpeningData): JSX.Element {
   const headingLead = data.headingLead ?? DEFAULT_COPY.headingLead;
   const lede = data.lede ?? DEFAULT_COPY.lede;
   return (
-    <section id="hero" className="chapter chapter--opening" data-title="Top">
-      {data.kicker && <p className="eyebrow">{data.kicker}</p>}
-      <h1>
-        {headingLead}
-        {data.headingAccent && (
-          <>
-            {" "}
-            <em>{data.headingAccent}</em>
-          </>
-        )}
-      </h1>
-      <p className="lede">{lede}</p>
-      {data.askBox ? (
-        <div className="ask">
-          <AskBoxHost prefix="opening" placeholder={data.prompt ?? undefined} />
-          {data.topics.length > 0 && (
-            <ul className="ask__topics" aria-label="Suggested questions">
-              {data.topics.map((topic) => (
-                <li key={topic}>
-                  <button type="button" data-atlas-fill={topic}>
-                    {topic}
-                  </button>
-                </li>
-              ))}
-            </ul>
+    // With the box, the opening is an Ask room (@brains/contracts ask-box):
+    // the words are its column, which scrolls within the screen beside the
+    // drawing on a wide screen; the drawing is lent to a phone's open
+    // conversation; the room draws leads from an answer's sources to the dots.
+    <section
+      id="hero"
+      className="chapter chapter--opening"
+      data-title="Top"
+      {...(data.askBox ? { [ASK_ROOM_ATTRIBUTE]: "" } : {})}
+    >
+      <div
+        className="opening__words"
+        {...(data.askBox ? { [ASK_COLUMN_ATTRIBUTE]: "" } : {})}
+      >
+        {data.kicker && <p className="eyebrow">{data.kicker}</p>}
+        <h1>
+          {headingLead}
+          {data.headingAccent && (
+            <>
+              {" "}
+              <em>{data.headingAccent}</em>
+            </>
           )}
-          <script src={ASK_BOX_SCRIPT_PATH} defer />
-        </div>
-      ) : (
-        data.ctaHref &&
-        data.ctaLabel && (
-          <a className="opening__door" href={data.ctaHref}>
-            {data.ctaLabel}
-          </a>
-        )
-      )}
-      <NetworkLayer {...placeNetwork(data)} />
+        </h1>
+        <p className="lede">{lede}</p>
+        {data.askBox ? (
+          <div className="ask">
+            <AskBoxHost
+              prefix="opening"
+              placeholder={data.prompt ?? undefined}
+            />
+            {data.topics.length > 0 && (
+              <ul className="ask__topics" aria-label="Suggested questions">
+                {data.topics.map((topic) => (
+                  <li key={topic}>
+                    <button type="button" data-atlas-fill={topic}>
+                      {topic}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+            <script src={ASK_BOX_SCRIPT_PATH} defer />
+          </div>
+        ) : (
+          data.ctaHref &&
+          data.ctaLabel && (
+            <a className="opening__door" href={data.ctaHref}>
+              {data.ctaLabel}
+            </a>
+          )
+        )}
+      </div>
+      <NetworkLayer {...placeNetwork(data)} lendable={data.askBox} />
       {data.askBox && (
-        <svg className="net-leads" data-net-leads="" aria-hidden="true" />
+        <svg
+          className="net-leads"
+          {...{ [ASK_LEADS_ATTRIBUTE]: "" }}
+          aria-hidden="true"
+        />
       )}
     </section>
   );

package/src/rizom/runtime/plugin.ts

@@ -15,6 +15,7 @@ import { foundationOrganism } from "../../story/foundation-organism";
 import { livingOrganism } from "../../story/living-organism";
 import { workOrganism } from "../../story/work-organism";
 import { storyRuntimeScript } from "../../story/runtime";
+import { ASK_ROOM_STYLES } from "@brains/site-atlas";
 
 export type { RizomRuntimeConfig } from "../contracts";
 
@@ -61,6 +62,7 @@ export const rizomRuntimeStaticAssets: Record<string, string> = {
   // The story pages: the page shape, the drawings and the reading thread.
   "/styles/story.css":
     storyStyles +
+    ASK_ROOM_STYLES +
     livingOrganism.css() +
     brainOrganism.css() +
     workOrganism.css() +

package/src/story/runtime.ts

@@ -4,6 +4,7 @@
  * function is exported for tests and inlined into the shipped script, so
  * there is one source for the reading line.
  */
+import { ASK_ROOM_SCRIPT } from "@brains/site-atlas";
 
 /** The index of the last chapter whose top has passed the reading line, clamped to the stages a drawing has. */
 export function currentChapter(
@@ -33,7 +34,9 @@ export function readingLine(
   return stripBottom === null ? viewportHeight * beside : stripBottom + 1;
 }
 
-export const storyRuntimeScript: string = `(function () {
+export const storyRuntimeScript: string =
+  ASK_ROOM_SCRIPT +
+  `(function () {
   ${currentChapter.toString()}
   ${readingLine.toString()}
   function init() {
@@ -109,11 +112,14 @@ export const storyRuntimeScript: string = `(function () {
     addEventListener("resize", function () { placeRail(); read(); });
     addEventListener("load", function () { placeRail(); read(); });
   }
-  // The homepage's drawing listens to the Ask box: an answer's sources name
-  // the brains whose published memory they came from (the box's ask:sources
-  // event), and those brains light while the rest dim. A source without a
-  // brain is this brain's own and lights the center. Pointing works both
-  // ways: a listed source lights its brain, a brain flags its listed sources.
+  // The homepage's drawings listen to the Ask room: an answer's sources name
+  // the brains whose published memory they came from (the room matches them
+  // to the opening's dots, keyed by brain, and tells the page), and those
+  // brains light in every drawing while the rest dim. A source the room
+  // matched to no brain is this brain's own and lights the center. Pointing
+  // works both ways: a listed source lights its brain, a brain flags its
+  // listed sources. Leads, the lending of the drawing to a phone's open
+  // conversation and the tap on a lit dot are the room's.
   function listen() {
     // The opening draws the network, and a chapter may draw it again beside
     // its own words: every drawing answers the same events.
@@ -127,20 +133,6 @@ export const storyRuntimeScript: string = `(function () {
     var replies = all(".net-reply[data-brain]");
     var names = all(".net-name[data-brain]");
     var sourceBrain = {};
-    function brainOf(source) {
-      var brain = source && source.brain;
-      if (!brain) return "";
-      var host = "";
-      if (brain.url) { try { host = new URL(brain.url).host; } catch (e) { host = ""; } }
-      var byHost = host && marks.filter(function (m) { return m.getAttribute("data-brain") === host; })[0];
-      if (byHost) return host;
-      var name = String(brain.name || "").toLowerCase();
-      var byName = marks.filter(function (m) {
-        var a = m.querySelector("[aria-label]");
-        return (a ? a.getAttribute("aria-label") : "").toLowerCase() === name;
-      })[0];
-      return byName ? byName.getAttribute("data-brain") : "";
-    }
     function light(id, on) {
       [marks, threads, replies, names].forEach(function (list) {
         list.forEach(function (el) { if (el.getAttribute("data-brain") === id) el.classList.toggle("is-lit", on); });
@@ -149,20 +141,19 @@ export const storyRuntimeScript: string = `(function () {
     function hot(id, on) {
       marks.concat(threads).forEach(function (el) { if (el.getAttribute("data-brain") === id) el.classList.toggle("is-hot", on); });
     }
-    document.addEventListener("ask:sources", function (event) {
+    document.addEventListener("ask:cited", function (event) {
       var detail = event.detail || {};
-      var sources = Array.isArray(detail.sources) ? detail.sources : [];
       var lit = {};
-      var rizom = false;
       sourceBrain = {};
-      sources.forEach(function (source) {
-        var id = brainOf(source);
-        if (id) { lit[id] = true; sourceBrain[source.id] = id; } else rizom = true;
+      (detail.cited || []).forEach(function (entry) {
+        lit[entry.key] = true;
+        sourceBrain[entry.source.id] = entry.key;
       });
       marks.forEach(function (m) { light(m.getAttribute("data-brain"), !!lit[m.getAttribute("data-brain")]); });
+      var rizom = (detail.unmatched || []).length > 0 && (detail.sources || []).length > 0;
       layers.forEach(function (layer) {
         layer.classList.toggle("has-replies", Object.keys(lit).length > 0);
-        layer.classList.toggle("is-rizom", rizom && sources.length > 0);
+        layer.classList.toggle("is-rizom", rizom);
       });
     });
     function listed(target) {
@@ -196,104 +187,6 @@ export const storyRuntimeScript: string = `(function () {
       if (!target || !target.hasAttribute || !target.hasAttribute("data-ask-answer")) return;
       document.dispatchEvent(new CustomEvent("ask:sources", { detail: { sources: askedSources() } }));
     }, true);
-    // The drawing belongs to the page while an answer is open. On desktop a
-    // dotted lead runs from each listed source to its brain in the opening's
-    // drawing; on a phone the drawing joins the open conversation as the
-    // first item of its scroll, and a tap on a lit dot brings its source
-    // into view. Only the opening's drawing is lent; a chapter's stays put.
-    var home = layers[0];
-    var homeMarks = marks.filter(function (m) { return home.contains(m); });
-    var leadsLayer = document.querySelector("[data-net-leads]");
-    var narrow = typeof matchMedia === "function" ? matchMedia("(max-width: 60rem)") : { matches: false };
-    var askHost = document.querySelector("[data-ask-box]");
-    var SVG = "http://www.w3.org/2000/svg", GAP = 6, GLYPH = 9;
-    function listedRow(scope, key) {
-      if (!scope) return null;
-      var rows = Array.prototype.filter.call(scope.querySelectorAll("[data-ask-source]"), function (row) {
-        return row.getAttribute("data-ask-source") === key;
-      });
-      return rows.length ? rows[rows.length - 1] : null;
-    }
-    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);
-      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);
-        if (!mark || !row) return;
-        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 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);
-        lead.setAttribute("d", "M" + x1 + " " + y1 + " C" + (x1 + bend) + " " + y1 + " " + (x2 - bend) + " " + y2 + " " + x2 + " " + y2);
-        leadsLayer.appendChild(lead);
-      });
-    }
-    var leadsPending = false;
-    function scheduleLeads() {
-      if (leadsPending || !leadsLayer) return;
-      leadsPending = true;
-      requestAnimationFrame(function () { leadsPending = false; drawLeads(); });
-    }
-    if (leadsLayer) {
-      addEventListener("resize", scheduleLeads);
-      // Scrolling the page or the conversation moves the listed sources.
-      document.addEventListener("scroll", scheduleLeads, true);
-      document.addEventListener("toggle", scheduleLeads, true);
-      if (askHost && typeof ResizeObserver === "function") new ResizeObserver(scheduleLeads).observe(askHost);
-    }
-    document.addEventListener("ask:sources", function () { drawLeads(); });
-    function sheetOpen() { return !!askHost && askHost.hasAttribute("data-ask-sheet"); }
-    var slot = null;
-    function lend() {
-      var dock = askHost.querySelector("[data-ask-dock]");
-      if (!home || !dock || home.parentElement === dock) return;
-      slot = document.createElement("div");
-      slot.className = "net-slot";
-      slot.setAttribute("aria-hidden", "true");
-      home.parentNode.insertBefore(slot, home);
-      dock.appendChild(home);
-    }
-    function giveBack() {
-      if (!slot) return;
-      slot.parentNode.insertBefore(home, slot);
-      slot.parentNode.removeChild(slot);
-      slot = null;
-    }
-    if (askHost && home && typeof MutationObserver === "function") {
-      // The box mounts, and so its dock appears, after the sheet has opened.
-      new MutationObserver(function () { if (sheetOpen()) lend(); else giveBack(); })
-        .observe(askHost, { attributes: true, attributeFilter: ["data-ask-sheet"], childList: true, subtree: true });
-    }
-    document.addEventListener("click", function (event) {
-      if (!sheetOpen() || !home) return;
-      var mark = event.target && event.target.closest ? event.target.closest(".net-mark[data-brain]") : null;
-      if (!mark || !home.contains(mark)) return;
-      var brain = mark.getAttribute("data-brain");
-      var key = Object.keys(sourceBrain).filter(function (k) { return sourceBrain[k] === brain; })[0];
-      var area = askHost.querySelector(".brain-box-scroll");
-      var row = key ? listedRow(area, key) : null;
-      if (!row || !area) return;
-      event.preventDefault();
-      var at = row.getBoundingClientRect(), box = area.getBoundingClientRect();
-      var top = area.scrollTop + at.top - box.top - area.clientHeight / 2 + at.height / 2;
-      if (area.scrollTo) area.scrollTo({ top: top, behavior: "smooth" }); else area.scrollTop = top;
-      row.removeAttribute("data-ask-flash");
-      void row.offsetWidth;
-      row.setAttribute("data-ask-flash", "");
-      setTimeout(function () { row.removeAttribute("data-ask-flash"); }, 1500);
-    }, true);
     document.addEventListener("mouseover", function (e) { point(e, true); });
     document.addEventListener("mouseout", function (e) { point(e, false); });
     document.addEventListener("focusin", function (e) { point(e, true); });

package/src/story.css

@@ -784,6 +784,45 @@
   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) {
+  /* The words are the room's column (the kit scrolls it within the screen);
+     the bar and the opening's 4rem of padding above and below stay clear, so
+     the composer is on the first screen. */
+  .chapter--opening .opening__words {
+    --ask-column-clear: calc(8rem + var(--bar-height, 4.6rem));
+  }
+  :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,
+  .story:has(.figure:not([data-stage="0"])) .net-leads {
+    opacity: 0;
+  }
+  .net-leads {
+    transition: opacity 0.6s ease;
+  }
+}
 .net-svg {
   overflow: visible;
 }
@@ -1416,46 +1455,21 @@
   opacity: 0;
   transition: opacity 0.6s ease;
 }
-/* The drawing belongs to the page while an answer is open. On desktop a
-   dotted lead runs from each listed source to its brain (drawn by the
-   runtime); on a phone the opening's drawing joins the open conversation as
-   the first item of its scroll, a slot holding its place meanwhile, and a
-   tapped dot flashes its source. */
+/* The Ask room's lead layer (the room script draws into it; the kit styles
+   the leads): leads join words to the drawing across the page, so the
+   viewport is their frame. On a phone the opening's drawing joins the open
+   conversation as the first item of its scroll, a slot holding its place. */
 .net-leads {
-  position: absolute;
+  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;
 }
-.net-leads path {
-  fill: none;
-  stroke: var(--color-accent);
-  stroke-width: 1.4;
-  stroke-linecap: round;
-  stroke-dasharray: 0.1 6;
-  opacity: 0.85;
-}
-.opening__ask [data-ask-source][data-ask-flash] {
-  animation: ask-flash 1.5s ease-out;
-}
-@keyframes ask-flash {
-  0%,
-  40% {
-    background: rgb(from var(--color-accent) r g b / 0.14);
-  }
-  100% {
-    background: transparent;
-  }
-}
 @media (max-width: 60rem) {
-  .net-leads {
-    display: none;
-  }
-  .net-slot {
+  [data-ask-slot] {
     height: var(--strip-h);
   }
   .opening__ask[data-ask-sheet] [data-ask-dock]:has(.net-layer) {
@@ -1473,14 +1487,6 @@
     border-bottom: 1px solid var(--color-border);
   }
 }
-@media (prefers-reduced-motion: reduce) {
-  .net-leads {
-    display: none;
-  }
-  .opening__ask [data-ask-source][data-ask-flash] {
-    animation: none;
-  }
-}
 /* The chapter's drawing is the network at rest: no pulse travels it and no
    brain blinks on its own; only the open question's brains answer. */
 .asked .net-pulse,