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

package/package.json

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

package/src/asked-datasource.ts

@@ -0,0 +1,72 @@
+import type {
+  BaseDataSourceContext,
+  DataSource,
+  DataSourceSchema,
+  IShell,
+} from "@brains/plugins";
+import { proximityMapDataSchema } from "@brains/agent-discovery/proximity-map";
+import { askedSchema } from "./asked";
+
+/** How many kept questions the chapter shows, most asked first. */
+const LIMIT = 12;
+const MAP_SOURCE_ID = "agent-discovery:proximity-map";
+const faqList = askedSchema.pick({ faqs: true });
+const emptyMap = {
+  center: { kind: "identity" },
+  nodes: [],
+  clusters: [],
+  sightings: [],
+  distanceRange: { min: 0, max: 0 },
+  pendingCount: 0,
+};
+
+/**
+ * The "Asked before" chapter's data: the published FAQs, read through the faq
+ * plugin's own datasource so drafts stay out the way its own lists keep them
+ * out, and so this site carries no FAQ runtime. None where the brain keeps
+ * no FAQs, and the chapter renders nothing.
+ */
+export interface AskedSources {
+  faqs: () => DataSource | undefined;
+  /** The live map's datasource, registered by agent-discovery; absent when the plugin is not loaded. */
+  map: () => DataSource | undefined;
+}
+
+export class RizomAskedDataSource implements DataSource {
+  public readonly id = "rizom:asked";
+  public readonly name = "Rizom Asked DataSource";
+  public readonly description =
+    "The published FAQs, with their sources, over the live network for the Asked-before chapter";
+  private readonly sources: AskedSources;
+
+  constructor(sources: AskedSources) {
+    this.sources = sources;
+  }
+
+  async fetch<T>(
+    query: unknown,
+    outputSchema: DataSourceSchema<T>,
+    context: BaseDataSourceContext,
+  ): Promise<T> {
+    const faqs = this.sources.faqs();
+    const map = this.sources.map();
+    const [kept, network] = await Promise.all([
+      faqs?.fetch
+        ? faqs.fetch({ query: { limit: LIMIT } }, faqList, context)
+        : faqList.parse({ faqs: [] }),
+      map?.fetch
+        ? map.fetch(query, proximityMapDataSchema, context)
+        : proximityMapDataSchema.parse(emptyMap),
+    ]);
+    return outputSchema.parse({ ...network, faqs: kept.faqs });
+  }
+}
+
+/** The datasource on the brain's shell, built when the site's plugin registers. */
+export function askedDataSource(shell: IShell): DataSource {
+  const registry = shell.getDataSourceRegistry();
+  return new RizomAskedDataSource({
+    faqs: () => registry.get("faq:entities"),
+    map: () => registry.get(MAP_SOURCE_ID),
+  });
+}

package/src/asked.tsx

@@ -0,0 +1,198 @@
+/** @jsxImportSource react */
+import type { JSX } from "react";
+import { proximityMapDataSchema } from "@brains/agent-discovery/proximity-map";
+import { answeredBy } from "@brains/contracts";
+import { StructuredContentFormatter } from "@brains/content-formatters";
+import { createTemplate, type Template } from "@brains/templates";
+import { MarkdownContent } from "@brains/ui-library";
+import { z } from "@rizom/site";
+import { NetworkLayer } from "./opening";
+import { placeNetwork } from "./story/network";
+
+/**
+ * "Asked before": visitors' questions the owner kept and published, most
+ * asked first, each opening on the answer, who answered, and the sources in
+ * their owners' words. The chapter follows "Where this goes" and precedes the
+ * doors: the reader has seen the argument and has their own doubts before
+ * being asked to choose. Opening a question lights the brains its answer
+ * drew on in the live drawing (see ./story/runtime); counts sort the list
+ * and are never shown.
+ */
+type AskedSourceSchema = z.ZodObject<{
+  id: z.ZodString;
+  title: z.ZodString;
+  url: z.ZodNullable<z.ZodString>;
+  excerpt: z.ZodNullable<z.ZodString>;
+  brain: z.ZodNullable<
+    z.ZodObject<{ name: z.ZodString; url: z.ZodNullable<z.ZodString> }>
+  >;
+}>;
+
+const askedSourceSchema: AskedSourceSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  url: z.string().nullable(),
+  excerpt: z.string().nullable(),
+  brain: z.object({ name: z.string(), url: z.string().nullable() }).nullable(),
+});
+
+export const askedFaqSchema: z.ZodObject<{
+  id: z.ZodString;
+  question: z.ZodString;
+  answer: z.ZodString;
+  asked: z.ZodNumber;
+  sources: z.ZodArray<AskedSourceSchema>;
+}> = z.object({
+  id: z.string(),
+  question: z.string(),
+  answer: z.string(),
+  asked: z.number().int(),
+  sources: z.array(askedSourceSchema),
+});
+
+/** The chapter's own words, authored as a content section like every chapter's. */
+type AskedCopySchema = z.ZodObject<{
+  cap: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+  claim: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+  body: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+}>;
+
+export const askedCopySchema: AskedCopySchema = z.object({
+  /** The eyebrow. */
+  cap: z.string().nullable().default(null),
+  /** The heading. */
+  claim: z.string().nullable().default(null),
+  /** The line under the heading. */
+  body: z.string().nullable().default(null),
+});
+
+const DEFAULT_COPY = {
+  cap: "Asked before",
+  claim: "What people ask the network",
+  body: "Questions visitors put to Rizom, answered from the connected brains and kept by the owner. Open one: the brains that answered light up.",
+};
+
+/** The published FAQs over the live network, which the chapter draws beside them. */
+export const askedSchema: z.ZodObject<
+  (typeof proximityMapDataSchema)["shape"] &
+    AskedCopySchema["shape"] & {
+      faqs: z.ZodArray<typeof askedFaqSchema>;
+    }
+> = proximityMapDataSchema.extend({
+  ...askedCopySchema.shape,
+  faqs: z.array(askedFaqSchema),
+});
+
+export type AskedData = z.output<typeof askedSchema>;
+type AskedSource = z.output<typeof askedSourceSchema>;
+
+const OWNER = "Rizom";
+
+/** What the drawing needs of a kept source: its key, title and brain. */
+function forDrawing(sources: AskedSource[]): string {
+  return JSON.stringify(
+    sources.map((source) => ({
+      id: source.id,
+      title: source.title,
+      ...(source.brain
+        ? {
+            brain: {
+              name: source.brain.name,
+              ...(source.brain.url ? { url: source.brain.url } : {}),
+            },
+          }
+        : {}),
+    })),
+  );
+}
+
+function Sources({ sources }: { sources: AskedSource[] }): JSX.Element | null {
+  if (sources.length === 0) return null;
+  const brains = sources.flatMap((source) =>
+    source.brain ? [source.brain.name] : [],
+  );
+  return (
+    <>
+      {brains.length > 0 && (
+        <p className="asked__by">{answeredBy(OWNER, brains)}</p>
+      )}
+      <ul className="asked__sources" aria-label="Sources">
+        {sources.map((source) => (
+          <li
+            key={source.id}
+            data-ask-source={source.id}
+            {...(source.brain ? { "data-ask-brain": source.brain.name } : {})}
+          >
+            <span className="asked__mark" aria-hidden="true" />
+            <span className="asked__piece">
+              {source.brain && <b>{source.brain.name}</b>}
+              {source.url ? (
+                <a href={source.url} target="_blank" rel="noopener noreferrer">
+                  {source.title}
+                </a>
+              ) : (
+                <span>{source.title}</span>
+              )}
+            </span>
+            {source.excerpt && <q>{source.excerpt}</q>}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+export function Asked(data: AskedData): JSX.Element {
+  const { faqs } = data;
+  if (faqs.length === 0) return <></>;
+  return (
+    <section
+      id="asked"
+      className="chapter asked"
+      data-title="Asked before"
+      data-lights-network=""
+    >
+      <p className="eyebrow">{data.cap ?? DEFAULT_COPY.cap}</p>
+      <h2>{data.claim ?? DEFAULT_COPY.claim}</h2>
+      <p>{data.body ?? DEFAULT_COPY.body}</p>
+      <NetworkLayer {...placeNetwork(data)} />
+      <div className="asked__list">
+        {faqs.map((faq) => (
+          <details
+            key={faq.id}
+            name="asked"
+            data-ask-answer={forDrawing(faq.sources)}
+          >
+            <summary>{faq.question}</summary>
+            <div className="asked__answer">
+              <MarkdownContent markdown={faq.answer} />
+              <Sources sources={faq.sources} />
+            </div>
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+// The chapter's words, edited as an ordinary markdown section and spliced
+// over the live FAQs by the content overlay.
+const askedCopyFormatter = new StructuredContentFormatter(askedCopySchema, {
+  title: "Asked before",
+  mappings: [
+    { key: "cap", label: "Cap", type: "string" },
+    { key: "claim", label: "Claim", type: "string" },
+    { key: "body", label: "Body", type: "string" },
+  ],
+});
+
+export const askedTemplate: Template = createTemplate({
+  name: "asked",
+  description:
+    "Asked before: the visitors' questions the owner kept, with their answers and sources",
+  schema: askedSchema,
+  dataSourceId: "rizom:asked",
+  overlayFormatter: askedCopyFormatter,
+  requiredPermission: "public",
+  layout: { component: Asked },
+});

package/src/opening.tsx

@@ -45,7 +45,7 @@ const PULSE_TRAVEL = 4.55;
 const replyDelay = (reach: number, after = 0): string =>
   `${(reach * PULSE_TRAVEL + after).toFixed(2)}s`;
 
-function NetworkLayer({
+export function NetworkLayer({
   brains,
   kin,
 }: ReturnType<typeof placeNetwork>): JSX.Element | null {
@@ -75,6 +75,7 @@ function NetworkLayer({
           <line
             key={`thread-${brain.id}`}
             className="net-thread"
+            data-brain={brain.id}
             x1="50"
             y1="50"
             x2={brain.x}
@@ -83,7 +84,11 @@ function NetworkLayer({
         ))}
         <circle className="net-pulse" cx="50" cy="50" r="46" />
         {brains.map((brain) => (
-          <g key={`reply-${brain.id}`} className="net-reply">
+          <g
+            key={`reply-${brain.id}`}
+            className="net-reply"
+            data-brain={brain.id}
+          >
             <circle
               className="net-echo"
               cx={brain.x}
@@ -119,6 +124,7 @@ function NetworkLayer({
           <li
             key={brain.id}
             className="net-mark"
+            data-brain={brain.id}
             style={{ left: `${brain.x}%`, top: `${brain.y}%` }}
           >
             <a href={`/agents/${brain.id}`} aria-label={brain.name}>
@@ -132,6 +138,7 @@ function NetworkLayer({
           <li
             key={brain.id}
             className={`net-name net-name--${brain.side}`}
+            data-brain={brain.id}
             style={{ left: `${brain.x}%`, top: `${brain.y}%` }}
           >
             {brain.name}
@@ -183,6 +190,9 @@ export function Opening(data: OpeningData): JSX.Element {
         )
       )}
       <NetworkLayer {...placeNetwork(data)} />
+      {data.askBox && (
+        <svg className="net-leads" data-net-leads="" aria-hidden="true" />
+      )}
     </section>
   );
 }

package/src/routes.ts

@@ -8,7 +8,7 @@ export const aiRoutes: RouteDefinitionInput[] = [
   {
     // The homepage, told as a story: the opening is the live network under the
     // authored words with the Ask box, then the science, the shift, the
-    // organism, where this goes and the two ways in. The problem, the system
+    // organism, where this goes, what was asked before and the two ways in. The problem, the system
     // and the proof are told on /work, /brain and by the opening itself. Copy
     // for every section belongs to the separate content repo under
     // site-content/living-memory/; keep that content identity stable.
@@ -25,6 +25,9 @@ export const aiRoutes: RouteDefinitionInput[] = [
       { id: "turn", template: "living-memory:turn" },
       { id: "growth", template: "living-memory:growth" },
       { id: "arc", template: "living-memory:arc" },
+      // What visitors asked before, answered and kept by the owner, read
+      // live from the published FAQs (see ./asked-datasource).
+      { id: "asked", template: "rizom:asked", dataQuery: {} },
       { id: "doors", template: "living-memory:doors" },
     ],
   },

package/src/site.ts

@@ -4,6 +4,8 @@ import { livingMemorySections } from "./living-memory";
 import { brainSections } from "./brain";
 import { openingTemplate } from "./opening";
 import { openingDataSource } from "./opening-datasource";
+import { askedTemplate } from "./asked";
+import { askedDataSource } from "./asked-datasource";
 import { writingTemplate } from "./writing";
 import { writingDataSource } from "./writing-datasource";
 import { workSections } from "./work";
@@ -19,8 +21,16 @@ export const rizomAiSite: SitePackage = createRizomSite({
   routes: aiRoutes,
   runtime: {
     contentNamespace: "rizom",
-    templates: { opening: openingTemplate, writing: writingTemplate },
-    dataSourceFactories: [openingDataSource, writingDataSource],
+    templates: {
+      opening: openingTemplate,
+      writing: writingTemplate,
+      asked: askedTemplate,
+    },
+    dataSourceFactories: [
+      openingDataSource,
+      writingDataSource,
+      askedDataSource,
+    ],
   },
   // Every page is authored schema-first (see ./living-memory, ./brain,
   // ./work, ./foundation).
@@ -35,10 +45,17 @@ export const rizomAiSite: SitePackage = createRizomSite({
   // datasource (see ./writing-datasource); entityDisplay supplies the labels
   // and detail-page paths the site builder links each piece by. Navigation is hidden — the layout's bar owns the nav, so the
   // auto-generated per-type indexes stay unlinked.
+  // What a visitor's answer may cite: the site's own pieces and the
+  // network's, which live on their brains' sites and have no route here.
   entityDisplay: {
-    post: { label: "Essay", navigation: { show: false } },
-    deck: { label: "Talk", navigation: { show: false } },
-    agent: { label: "Agent", navigation: { show: false } },
+    post: { label: "Essay", citable: true, navigation: { show: false } },
+    deck: { label: "Talk", citable: true, navigation: { show: false } },
+    agent: { label: "Agent", citable: true, navigation: { show: false } },
+    "network-piece": {
+      label: "From the network",
+      citable: true,
+      navigation: { show: false },
+    },
   },
 });
 

package/src/story/living-organism.tsx

@@ -112,6 +112,16 @@ export const livingOrganism: Organism = organism({
         economy.map((p, i) => [`E${i + 1}`, at(p, i % 3 === 0 ? 6 : 4)]),
       ),
     },
+    // Asked before: the economy stays, at rest; the live network beside the
+    // chapter lights from the open question (see ./runtime).
+    {
+      ...Object.fromEntries(
+        Object.entries(one).map(([k, v]) => [k, shrink(v)]),
+      ),
+      ...Object.fromEntries(
+        economy.map((p, i) => [`E${i + 1}`, at(p, i % 3 === 0 ? 6 : 4)]),
+      ),
+    },
     // Two ways in: back to one lantern.
     { L: [C, C, 13, 1] },
   ],

package/src/story/runtime.ts

@@ -89,6 +89,8 @@ export const storyRuntimeScript: string = `(function () {
       var stage = currentChapter(tops, line, stageCount);
       if (figure) figure.dataset.stage = String(stage);
       chapters.forEach(function (chapter, i) { chapter.classList.toggle("is-current", i === current); });
+      // A chapter that lights the network keeps the live drawing in view while it is read.
+      story.classList.toggle("is-asked", !!(chapters[current] && chapters[current].hasAttribute("data-lights-network")));
       if (!rail) return;
       var max = document.documentElement.scrollHeight - innerHeight;
       var progress = max > 0 ? Math.min(1, scrollY / max) : 0;
@@ -107,10 +109,201 @@ 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.
+  function listen() {
+    // The opening draws the network, and a chapter may draw it again beside
+    // its own words: every drawing answers the same events.
+    var layers = Array.prototype.slice.call(document.querySelectorAll(".net-layer"));
+    if (!layers.length) return;
+    function all(selector) {
+      return layers.reduce(function (found, layer) { return found.concat(Array.prototype.slice.call(layer.querySelectorAll(selector))); }, []);
+    }
+    var marks = all(".net-mark[data-brain]");
+    var threads = all(".net-thread[data-brain]");
+    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); });
+      });
+    }
+    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) {
+      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;
+      });
+      marks.forEach(function (m) { light(m.getAttribute("data-brain"), !!lit[m.getAttribute("data-brain")]); });
+      layers.forEach(function (layer) {
+        layer.classList.toggle("has-replies", Object.keys(lit).length > 0);
+        layer.classList.toggle("is-rizom", rizom && sources.length > 0);
+      });
+    });
+    function listed(target) {
+      var row = target && target.closest ? target.closest("[data-ask-source]") : null;
+      return row ? row : null;
+    }
+    function point(event, on) {
+      var row = listed(event.target);
+      if (row) { var id = sourceBrain[row.getAttribute("data-ask-source")]; if (id) hot(id, on); return; }
+      var mark = event.target && event.target.closest ? event.target.closest(".net-mark[data-brain]") : null;
+      if (!mark) return;
+      var brain = mark.getAttribute("data-brain");
+      hot(brain, on);
+      Object.keys(sourceBrain).forEach(function (key) {
+        if (sourceBrain[key] !== brain) return;
+        Array.prototype.forEach.call(document.querySelectorAll("[data-ask-source]"), function (row) {
+          if (row.getAttribute("data-ask-source") !== key) return;
+          if (on) row.setAttribute("data-ask-hot", ""); else row.removeAttribute("data-ask-hot");
+        });
+      });
+    }
+    // "Asked before": an open question's kept sources light the drawing the
+    // way a fresh answer's do; with no question open, the drawing rests.
+    function askedSources() {
+      var open = document.querySelector("details[data-ask-answer][open]");
+      if (!open) return [];
+      try { var kept = JSON.parse(open.getAttribute("data-ask-answer") || "[]"); return Array.isArray(kept) ? kept : []; } catch (e) { return []; }
+    }
+    document.addEventListener("toggle", function (event) {
+      var target = event.target;
+      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); });
+    document.addEventListener("focusout", function (e) { point(e, false); });
+  }
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", init);
+    document.addEventListener("DOMContentLoaded", function () { init(); listen(); });
   } else {
     init();
+    listen();
   }
 })();
 `;