@miadi/attention-core

A panel of questions that wait for a person's answer, without a framework.

In the Miadi stack, an attention item is a question raised inside an episode (by an agent or a person) that the work cannot settle alone: a decision, a consent, a choice between two readings. This package shows those items and collects the answers. It is one of the places where a person's judgment enters the record.

Works with:

• @miadi/attention-ui: the React host over this core.
• @miadi/inquiry-weave: reads an episode's attention items and records answers.

One panel, three ways to put it on a page, and every one of them renders the same markup:

| host | entry | what it gives | |---|---|---| | a server that renders HTML | renderAttentionPanelHtml(input) | the panel as a string | | a page with no framework | mountAttentionPanel(root, options) from @miadi/attention-core/dom | disclosure, drafts, validation, submit lifecycle | | React | @miadi/attention-ui | the React host over this core |

The package owns the item vocabulary, the panel's behaviour as plain functions (resolveView, toggleLabel, validateAnswer, initialPanelState …), its visual specification (attentionStyles), and the stylesheet. It owns no transport: nothing here fetches, holds a token, or knows a URL, a filesystem root, or a medicine-wheel address. The host passes items and an onAnswer callback; @miadi/inquiry-weave is the usual source of both.

Server-rendered, then taken over in the browser

// server (Node, CommonJS or ESM)
const { renderAttentionPanelHtml } = require("@miadi/attention-core");
const html = renderAttentionPanelHtml({
  items,                       // from @miadi/inquiry-weave readEpisodeAttention
  initialOpenId: req.query.attention,
  instanceId: "episode-attention",
});

<link rel="stylesheet" href="/vendor/attention-core/attention-panel.css">
<div id="attention">${html}</div>
<script type="module">
  import { mountAttentionPanel } from "/vendor/attention-core/dom.js";
  mountAttentionPanel(document.getElementById("attention"), {
    items, initialOpenId, instanceId: "episode-attention",
    onAnswer: async (item, answer) => {
      const r = await fetch(`/api/episodes/${item.episode}/attention/${item.id}`, {
        method: "POST", headers: { "content-type": "application/json" },
        body: JSON.stringify({ answer }),
      });
      if (!r.ok) throw new Error((await r.json()).error);
      return { tone: "ok", message: "Answer recorded." };
    },
  });
</script>

dist/ has no dependencies and uses relative .js imports, so a host can serve it as static files and a browser loads it with no bundler. The mount re-renders the HTML the server sent, so the panel is taken over in place.

A global inbox, where rows come from different episodes, passes episodeLinks: (item) => [{ href, label }]; the package escapes them and renders them beside the row, never inside its disclosure button.

One panel, not two

@miadi/attention-ui renders its React tree from the same style functions and model, and its parity test renders both for the same input and compares every element, attribute, inline style and text node. A change to the panel is made here, once.