React

The React entry is a thin layer: one component per element, so a React host never touches the custom elements directly.

import { PbsBlock, PbsForm } from "pi-better-show/react";

<PbsBlock segment={segment} doc="chat-7" onAnswer={(answer) => send(encodeAnswer(answer))} />
<PbsForm data={formData} answered={fields} density="compact" onAnswer={...} />

One component per element (PbsCallout … PbsTree) plus PbsBlock, which draws a parse segment with the element for its kind and addresses it by its index. Props: data, answered, onAnswer(answer, event) (return false to refuse), blockRef, density, scheme, lang, className, id, ref. A parent render with equal data does not redraw the element or clear what the user typed. React 19 or later, as an optional peer dependency.