@north-light/crouter 0.3.198 → 0.3.199

package/dist/pages/elements/text.js

@@ -1,1175 +0,0 @@
-/**
- * `<crtr-text>` — the universal primitive: prose the agent puts in front of the user, which
- * the user can rewrite, annotate, or both.
- *
- * The three shapes in the catalog are all this one element:
- *
- *  - a **draft** the user edits in place — pre-filled and editable by default;
- *  - **read** text the user leaves anchored comments on, review-style — set `editable: false`,
- *    then select a range and the comment affordance appears at the selection;
- *  - an **empty input** — `editable` with no starting text, which opens already editing.
- *
- * `singleLine` is the fourth shape and the one that is not prose: one compact form field for a
- * subject line, a name, a URL. It is always editing, so it drops the edit toggle; it has no
- * paragraphs to anchor a range against, so it drops the comment affordance and shows only the
- * comments a saved answer already carried. Enter is a form field's Enter — it types nothing,
- * and the pager's `⌘`/`Ctrl` + `Enter` still submits.
- *
- * Text is always commentable; that is not a capability switch, and edit and comment coexist.
- * Reading is the resting state, because that is where anchored commenting lives; the edit
- * toggle swaps the block for a plain textarea. Comments survive the switch, but a range
- * anchor written before an edit can end up pointing at moved text — which is why every range
- * carries the `quote` it was written against.
- *
- * `edited` means *differs*, not *was touched*: returning the text to what the agent wrote
- * un-sets the flag.
- *
- * Ported from the reviewed interaction kit (`apps/gateway/components/agent-ui/agent-text.tsx`
- * and `comment-affordance.tsx` @ `3705fe9e2`), framework-free and styled only through the
- * bundle's `--crtr-*` tokens.
- */
-import { applyReadOnly, isReadOnly } from '../readonly.js';
-import { registerElement } from '../register.js';
-import { readSlotConfig, readSlotId } from '../slot-config.js';
-import { respond, savedResponse } from '../host.js';
-import { registerSlotResponse } from '../responses.js';
-import { adoptComments, canRecordComments, findComment, quotePreview, setComment } from '../comments.js';
-import { focusRingStyle, writingBoxStyle } from '../controls.js';
-const WHOLE = { kind: 'whole' };
-const WHOLE_TARGET = 'the whole passage';
-const RANGE_TARGET = 'the selected text';
-const POPOVER_GAP = 6;
-const POPOVER_ID = 'comment-popover';
-/** Ids are scoped to this element's shadow root, so one constant is unique everywhere. */
-const LABEL_ID = 'prompt-label';
-const STYLE = `
-  :host {
-    display: block;
-  }
-
-  [part="container"] {
-    position: relative;
-    display: grid;
-    gap: var(--crtr-text-container-gap, var(--crtr-space-2));
-  }
-
-  /* The prompt reads as the agent's own prose above the passage, matching the table's
-     caption rather than shouting over the text it introduces. */
-  [part="label"] {
-    margin: var(--crtr-text-label-margin, 0);
-    color: var(--crtr-text-label-text-color, var(--crtr-color-text-muted));
-  }
-
-  [part="toolbar"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--crtr-text-toolbar-gap, var(--crtr-space-2));
-  }
-
-  [part="edited"] {
-    padding: var(--crtr-text-edited-padding, 0 var(--crtr-space-2));
-    color: var(--crtr-text-edited-text-color, var(--crtr-color-accent));
-    background: var(--crtr-text-edited-fill, color-mix(in srgb, var(--crtr-color-accent) 14%, transparent));
-    border-radius: var(--crtr-text-edited-radius, var(--crtr-radius-small));
-    font-family: var(--crtr-text-edited-font-family, var(--crtr-font-mono));
-    font-size: var(--crtr-text-edited-font-size, 0.75em);
-    letter-spacing: var(--crtr-text-edited-letter-spacing, 0.06em);
-    line-height: var(--crtr-text-edited-line-height, 1.7);
-    text-transform: var(--crtr-text-edited-text-transform, uppercase);
-  }
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--crtr-text-button-gap, var(--crtr-space-1));
-    max-width: var(--crtr-text-button-max-width, 100%);
-    padding: var(--crtr-text-button-padding, var(--crtr-space-1) var(--crtr-space-2));
-    color: var(--crtr-text-button-text-color, var(--crtr-color-text-muted));
-    font: var(--crtr-text-button-font, inherit);
-    background: var(--crtr-text-button-fill, transparent);
-    border: var(--crtr-text-button-border-width, 1px)
-      var(--crtr-text-button-border-style, solid)
-      var(--crtr-text-button-border-color, transparent);
-    border-radius: var(--crtr-text-button-radius, var(--crtr-radius-small));
-    cursor: pointer;
-    /* One motion knob for all three properties, over the family's, because a button that
-       settles at a different speed than the field beside it is the drift controls.ts exists
-       to remove. */
-    transition: color var(--crtr-text-button-transition, var(--crtr-control-transition, 120ms ease)),
-      background-color var(--crtr-text-button-transition, var(--crtr-control-transition, 120ms ease)),
-      border-color var(--crtr-text-button-transition, var(--crtr-control-transition, 120ms ease));
-  }
-
-  button:hover {
-    color: var(--crtr-text-button-hover-text-color, var(--crtr-color-text));
-    background: var(--crtr-text-button-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-${focusRingStyle({ scope: 'text-whole-comment' }, '[part~="whole-comment"]')}
-${focusRingStyle({ scope: 'text-edit-toggle' }, '[part="edit-toggle"]')}
-${focusRingStyle({ scope: 'text-selection-comment' }, '[part~="selection-comment"]')}
-${focusRingStyle({ scope: 'text-comment-chip' }, '[part~="comment-chip"]')}
-${focusRingStyle({ scope: 'text-popover-save' }, '[part="popover-save"]')}
-${focusRingStyle({ scope: 'text-popover-cancel' }, '[part="popover-cancel"]')}
-  button[data-state="on"] {
-    color: var(--crtr-text-button-on-text-color, var(--crtr-color-accent));
-  }
-
-  /* Editing a prefilled draft is a primary path, not an icon to discover. Keep the control
-     beside the text but give it the bordered, labelled shape that reads as an action. */
-  [part="edit-toggle"] {
-    color: var(--crtr-text-edit-toggle-text-color, var(--crtr-color-text));
-    background: var(--crtr-text-edit-toggle-fill, var(--crtr-color-background));
-    border-color: var(--crtr-text-edit-toggle-border-color, var(--crtr-color-border));
-  }
-
-  /* Reached for and engaged are one treatment here, so they are one knob: active. */
-  [part="edit-toggle"]:hover,
-  [part="edit-toggle"][data-state="on"] {
-    color: var(--crtr-text-edit-toggle-active-text-color, var(--crtr-color-accent));
-    border-color: var(--crtr-text-edit-toggle-active-border-color,
-      color-mix(in srgb, var(--crtr-color-accent) 45%, var(--crtr-color-border)));
-  }
-
-  /* Width and height are one visual knob — the icon is square. */
-  svg {
-    width: var(--crtr-text-icon-size, 0.875em);
-    height: var(--crtr-text-icon-size, 0.875em);
-    flex: none;
-  }
-
-  /* Both writing boxes in one call, because in the kit they are one control at two heights:
-     input.tsx and textarea.tsx carry the same border, radius, padding, fill, elevation and
-     focus ring, and differ only in how tall they start. Writing them separately is what let
-     them drift into two visibly different fields — different padding, different radius,
-     different fill, and an inset outline on one against the kit's outset ring on the other.
-
-     Each selector still gets its own scope: the field and editor are distinct anatomy even
-     though this recipe keeps their default paint identical. */
-${writingBoxStyle({ scope: 'text-input' }, '[part="input"]')}
-${writingBoxStyle({ scope: 'text-editor' }, '[part="editor"]')}
-  /* The one thing the textarea does not share: it starts tall and may be dragged taller. */
-  [part="editor"] {
-    min-height: var(--crtr-text-editor-min-height, 10em);
-    resize: vertical;
-  }
-
-  /* The kit ring is outset paint, so a writing box needs a three-pixel gutter inside its grid
-     track. Without it the box fills the track exactly and the ring is shaved off by a tight
-     host frame. Prose is the other face of this surface and keeps its own inset ring, so it
-     stays full-bleed. */
-  [part="surface"]:has([part="input"]),
-  [part="surface"]:has([part="editor"]) {
-    padding: var(--crtr-text-surface-padding, 0.1875rem);
-  }
-
-  [part="body"] {
-    position: relative;
-    padding: var(--crtr-text-body-padding, var(--crtr-space-3) var(--crtr-space-4));
-    background: var(--crtr-text-body-fill, var(--crtr-color-surface));
-    border: var(--crtr-text-body-border-width, 1px)
-      var(--crtr-text-body-border-style, solid)
-      var(--crtr-text-body-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-text-body-radius, var(--crtr-radius-medium));
-  }
-
-  /* The ring sits inside the border rather than outside it. The body is full-bleed — it runs
-     the whole width of the frame the host gives the page — so an outset ring has nowhere to be
-     drawn and gets clipped at the frame's edges, showing three sides of a rectangle. */
-  [part="body"]:focus-visible {
-    outline: var(--crtr-text-body-focus-ring-width, 2px)
-      var(--crtr-text-body-focus-ring-style, solid)
-      var(--crtr-text-body-focus-ring-color, var(--crtr-color-focus));
-    outline-offset: var(--crtr-text-body-focus-ring-offset, -2px);
-  }
-
-  [part="prose"] {
-    display: grid;
-    gap: var(--crtr-text-prose-gap, var(--crtr-space-3));
-  }
-
-  [part="prose"] p {
-    margin: var(--crtr-text-prose-paragraph-margin, 0);
-    /* The agent's own line breaks are the passage; preserving them is behavior. */
-    white-space: pre-wrap;
-  }
-
-  [part="placeholder"] {
-    color: var(--crtr-text-placeholder-text-color, var(--crtr-color-text-muted));
-  }
-
-  [part~="commented"] {
-    position: relative;
-    border-radius: var(--crtr-text-commented-radius, var(--crtr-radius-small));
-    background: var(--crtr-text-commented-fill, color-mix(in srgb, var(--crtr-color-accent) 18%, transparent));
-    text-decoration: var(--crtr-text-commented-text-decoration, underline dotted);
-    text-decoration-color: var(--crtr-text-commented-text-decoration-color, var(--crtr-color-accent));
-    text-underline-offset: var(--crtr-text-commented-text-underline-offset, 0.25em);
-    cursor: help;
-    outline: var(--crtr-text-commented-outline, none);
-  }
-
-  [part~="commented"]:focus-visible {
-    outline: var(--crtr-text-commented-focus-ring-width, 2px)
-      var(--crtr-text-commented-focus-ring-style, solid)
-      var(--crtr-text-commented-focus-ring-color, var(--crtr-color-focus));
-    outline-offset: var(--crtr-text-commented-focus-ring-offset, 2px);
-  }
-
-  /* The staged delays here and on the hover rule below are the bubble's show/hide
-     choreography — behavior rather than a styling value, so they stay literal. */
-  [part="comment-bubble"] {
-    position: absolute;
-    bottom: calc(100% + var(--crtr-text-comment-bubble-offset, var(--crtr-space-1)));
-    left: 0;
-    z-index: 2;
-    display: grid;
-    gap: var(--crtr-text-comment-bubble-gap, var(--crtr-space-1));
-    width: var(--crtr-text-comment-bubble-width, max-content);
-    max-width: var(--crtr-text-comment-bubble-max-width, 18em);
-    padding: var(--crtr-text-comment-bubble-padding, var(--crtr-space-2) var(--crtr-space-3));
-    color: var(--crtr-text-comment-bubble-text-color, var(--crtr-color-text));
-    background: var(--crtr-text-comment-bubble-fill, var(--crtr-color-background));
-    border: var(--crtr-text-comment-bubble-border-width, 1px)
-      var(--crtr-text-comment-bubble-border-style, solid)
-      var(--crtr-text-comment-bubble-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-text-comment-bubble-radius, var(--crtr-radius-medium));
-    box-shadow: var(--crtr-text-comment-bubble-shadow, var(--crtr-shadow));
-    text-decoration: none;
-    white-space: normal;
-    user-select: none;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 120ms ease 120ms, visibility 0s linear 240ms;
-  }
-
-  [part~="commented"]:hover > [part="comment-bubble"],
-  [part~="commented"]:focus > [part="comment-bubble"] {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 120ms ease 220ms, visibility 0s linear 220ms;
-  }
-
-  /* The comment layer's micro-labels are the page's own prose, one step down and muted — not
-     caps-mono. Mono set in capitals reads as machine output, and what these say ("Comment on
-     this passage", "2 comments") is the interface talking to a person. */
-  [part="bubble-label"],
-  [part="comment-count"],
-  [part="popover-subject"],
-  [part="popover-hint"] {
-    color: var(--crtr-text-comment-label-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-text-comment-label-font-size, 0.875em);
-  }
-
-  [part="bubble-label"] {
-    color: var(--crtr-text-bubble-label-text-color, var(--crtr-color-accent));
-  }
-
-  [part~="selection-comment"] {
-    position: absolute;
-    z-index: 3;
-    color: var(--crtr-text-selection-comment-text-color, var(--crtr-color-accent));
-    background: var(--crtr-text-selection-comment-fill, var(--crtr-color-background));
-    border-color: var(--crtr-text-selection-comment-border-color,
-      color-mix(in srgb, var(--crtr-color-accent) 40%, transparent));
-    box-shadow: var(--crtr-text-selection-comment-shadow, var(--crtr-shadow));
-  }
-
-  [part="comment-rail"] {
-    display: grid;
-    gap: var(--crtr-text-comment-rail-gap, var(--crtr-space-1));
-  }
-
-  [part="comment-chips"] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--crtr-text-comment-chips-gap, var(--crtr-space-2));
-  }
-
-  [part~="comment-chip"] {
-    color: var(--crtr-text-comment-chip-text-color, var(--crtr-color-text));
-    border-color: var(--crtr-text-comment-chip-border-color, var(--crtr-color-border));
-    text-align: var(--crtr-text-comment-chip-text-align, left);
-  }
-
-  [part~="comment-chip"] > span {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  [part="popover"] {
-    position: absolute;
-    z-index: 5;
-    box-sizing: border-box;
-    display: grid;
-    gap: var(--crtr-text-popover-gap, var(--crtr-space-2));
-    width: var(--crtr-text-popover-width, 20em);
-    max-width: var(--crtr-text-popover-max-width, 100%);
-    padding: var(--crtr-text-popover-padding, var(--crtr-space-3));
-    background: var(--crtr-text-popover-fill, var(--crtr-color-background));
-    border: var(--crtr-text-popover-border-width, 1px)
-      var(--crtr-text-popover-border-style, solid)
-      var(--crtr-text-popover-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-text-popover-radius, var(--crtr-radius-medium));
-    box-shadow: var(--crtr-text-popover-shadow, var(--crtr-shadow));
-  }
-
-  [part="popover"][hidden],
-  [part="toolbar"][hidden],
-  [part~="whole-comment"][hidden],
-  [part="edited"][hidden],
-  [part="comment-rail"][hidden],
-  [part~="selection-comment"][hidden],
-  [part="popover-quote"][hidden],
-  [part="edit-toggle"][hidden] {
-    display: none;
-  }
-
-  [part="popover-subject"] {
-    margin: var(--crtr-text-popover-subject-margin, 0);
-  }
-
-  /* Smaller than the comment being written, because it is the context and not the subject.
-     The text arrives already elided to about two lines by quotePreview, so it wraps normally
-     rather than keeping the source's line breaks. */
-  [part="popover-quote"] {
-    margin: var(--crtr-text-popover-quote-margin, 0);
-    padding: var(--crtr-text-popover-quote-padding, var(--crtr-space-1) var(--crtr-space-2));
-    color: var(--crtr-text-popover-quote-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-text-popover-quote-font-size, 0.8125em);
-    background: var(--crtr-text-popover-quote-fill, color-mix(in srgb, var(--crtr-color-accent) 8%, transparent));
-    border-left: var(--crtr-text-popover-quote-border-width, 2px)
-      var(--crtr-text-popover-quote-border-style, solid)
-      var(--crtr-text-popover-quote-border-color, color-mix(in srgb, var(--crtr-color-accent) 40%, transparent));
-    overflow-wrap: anywhere;
-  }
-
-  /* The composer is its own scope: it is the one writing box a person can meet beside the
-     passage's own, so the two are separately restylable. */
-${writingBoxStyle({ scope: 'text-popover-input' }, '[part="popover-input"]')}
-  [part="popover-input"] {
-    min-height: var(--crtr-text-popover-input-min-height, 5em);
-    resize: vertical;
-  }
-
-  [part="popover-actions"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--crtr-text-popover-actions-gap, var(--crtr-space-2));
-  }
-
-  [part="popover-buttons"] {
-    display: flex;
-    gap: var(--crtr-text-popover-buttons-gap, var(--crtr-space-2));
-  }
-
-  [part="popover-save"] {
-    color: var(--crtr-text-popover-save-text-color, var(--crtr-color-accent-contrast));
-    background: var(--crtr-text-popover-save-fill, var(--crtr-color-accent));
-  }
-
-  /* Mixing the accent toward the text colour darkens on a light token set and lightens on a
-     dark one — an opacity or brightness step moves the wrong way on one of them. */
-  [part="popover-save"]:hover {
-    color: var(--crtr-text-popover-save-hover-text-color, var(--crtr-color-accent-contrast));
-    background: var(--crtr-text-popover-save-hover-fill,
-      color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
-  }
-
-  /* Cancel is the quiet half of every editor in this bundle: no border until you reach for it. */
-  [part="popover-cancel"] {
-    border-color: var(--crtr-text-popover-cancel-border-color, transparent);
-  }
-
-  /* Flat: this sits in the flow of the page. A shadow in this bundle means floating — the
-     comment bubble, the selection button, the popover, and nothing else. */
-  [part="unavailable"] {
-    padding: var(--crtr-text-unavailable-padding, var(--crtr-space-3));
-    color: var(--crtr-text-unavailable-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-text-unavailable-fill, var(--crtr-color-surface));
-    border: var(--crtr-text-unavailable-border-width, 1px)
-      var(--crtr-text-unavailable-border-style, solid)
-      var(--crtr-text-unavailable-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-text-unavailable-radius, var(--crtr-radius-medium));
-  }
-
-  [part="reason"] {
-    color: var(--crtr-text-reason-text-color, var(--crtr-color-text));
-    font-family: var(--crtr-text-reason-font-family, var(--crtr-font-mono));
-  }
-`;
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const BUBBLE = 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z';
-const ICON_COMMENT_ADD = [BUBBLE, 'M12 7v6', 'M9 10h6'];
-const ICON_COMMENT = [BUBBLE, 'M13 8H7', 'M17 12H7'];
-const ICON_EDIT = [
-    'M12 20h9',
-    'M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z',
-    'm15 5 3 3',
-];
-const ICON_DONE = ['M20 6 9 17l-5-5'];
-function icon(paths) {
-    const svg = document.createElementNS(SVG_NS, 'svg');
-    svg.setAttribute('viewBox', '0 0 24 24');
-    svg.setAttribute('fill', 'none');
-    svg.setAttribute('stroke', 'currentColor');
-    svg.setAttribute('stroke-width', '2');
-    svg.setAttribute('stroke-linecap', 'round');
-    svg.setAttribute('stroke-linejoin', 'round');
-    svg.setAttribute('aria-hidden', 'true');
-    for (const d of paths) {
-        const path = document.createElementNS(SVG_NS, 'path');
-        path.setAttribute('d', d);
-        svg.append(path);
-    }
-    return svg;
-}
-/** Paragraphs with their character offsets into the whole text preserved. */
-function splitParagraphs(text) {
-    const out = [];
-    const separator = /\n{2,}/g;
-    let cursor = 0;
-    let match;
-    while ((match = separator.exec(text)) !== null) {
-        out.push({ start: cursor, text: text.slice(cursor, match.index) });
-        cursor = match.index + match[0].length;
-    }
-    out.push({ start: cursor, text: text.slice(cursor) });
-    return out.filter((paragraph) => paragraph.text.trim().length > 0);
-}
-/** Splits one paragraph at its commented ranges so they can be painted. */
-function segmentParagraph(paragraph, comments) {
-    const anchored = comments
-        .filter((comment) => comment.anchor.kind === 'range')
-        .filter((comment) => comment.anchor.end > paragraph.start && comment.anchor.start < paragraph.start + paragraph.text.length)
-        .sort((a, b) => a.anchor.start - b.anchor.start);
-    const segments = [];
-    let cursor = 0;
-    for (const comment of anchored) {
-        const start = Math.max(cursor, comment.anchor.start - paragraph.start);
-        const end = Math.min(paragraph.text.length, comment.anchor.end - paragraph.start);
-        if (end <= start)
-            continue; // fully overlapped by an earlier comment
-        if (start > cursor)
-            segments.push({ text: paragraph.text.slice(cursor, start) });
-        segments.push({ text: paragraph.text.slice(start, end), comment });
-        cursor = end;
-    }
-    if (cursor < paragraph.text.length)
-        segments.push({ text: paragraph.text.slice(cursor) });
-    return segments;
-}
-function closestParagraph(node) {
-    const element = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
-    return element?.closest('[data-paragraph]') ?? null;
-}
-/**
- * Characters of `root` that precede the (node, offset) boundary. Comment bubbles live inside
- * their highlighted range for positioning, but are UI rather than passage text, so cloned
- * bubble nodes are removed before measuring. This keeps later anchors aligned to `value.text`
- * after an earlier range has already been commented.
- */
-function offsetWithin(root, node, offset) {
-    const range = document.createRange();
-    range.selectNodeContents(root);
-    range.setEnd(node, offset);
-    const contents = range.cloneContents();
-    for (const bubble of contents.querySelectorAll('[part="comment-bubble"]'))
-        bubble.remove();
-    return contents.textContent?.length ?? 0;
-}
-function passageLength(root) {
-    const contents = root.cloneNode(true);
-    for (const bubble of contents.querySelectorAll('[part="comment-bubble"]'))
-        bubble.remove();
-    return contents.textContent?.length ?? 0;
-}
-/**
- * Normalizes a browser Selection boundary to one of the rendered paragraph text ranges.
- * A whole-paragraph selection commonly ends at character 0 of the NEXT `<p>` (or at the next
- * child boundary of their shared wrapper), despite selecting no text there. For an end
- * boundary, that belongs to the previous paragraph.
- */
-function paragraphBoundary(body, node, offset, edge) {
-    const paragraphs = Array.from(body.querySelectorAll('[data-paragraph]'));
-    const direct = closestParagraph(node);
-    if (direct) {
-        if (edge === 'end' && offset === 0) {
-            const index = paragraphs.indexOf(direct);
-            const previous = paragraphs[index - 1];
-            if (previous)
-                return { paragraph: previous, offset: passageLength(previous) };
-        }
-        return { paragraph: direct, offset: offsetWithin(direct, node, offset) };
-    }
-    // The range can also land on the wrapper between paragraph elements. Locate the first
-    // paragraph at/after that caret for a start, or the last paragraph before it for an end.
-    const boundary = document.createRange();
-    boundary.setStart(node, offset);
-    boundary.collapse(true);
-    const ordered = edge === 'start' ? paragraphs : [...paragraphs].reverse();
-    for (const paragraph of ordered) {
-        const contents = document.createRange();
-        contents.selectNodeContents(paragraph);
-        const relation = boundary.compareBoundaryPoints(edge === 'start' ? Range.START_TO_START : Range.START_TO_END, contents);
-        if ((edge === 'start' && relation <= 0) || (edge === 'end' && relation >= 0)) {
-            return { paragraph, offset: edge === 'start' ? 0 : passageLength(paragraph) };
-        }
-    }
-    return null;
-}
-/**
- * The live selection that covers this element's prose. A selection made inside a shadow root
- * is reported by `ShadowRoot.getSelection()` where that exists and by the document selection
- * elsewhere, so both are consulted and the containment check decides.
- */
-function selectionRange(root, body) {
-    const scoped = root;
-    const candidates = [
-        typeof scoped.getSelection === 'function' ? scoped.getSelection() : null,
-        document.getSelection(),
-    ];
-    for (const selection of candidates) {
-        if (!selection || selection.isCollapsed || selection.rangeCount === 0)
-            continue;
-        const range = selection.getRangeAt(0);
-        if (body.contains(range.startContainer) && body.contains(range.endContainer))
-            return range;
-    }
-    return null;
-}
-/**
- * Every node that opens the comment popover carries the popover's own semantics: the kit's
- * Radix trigger supplied these, and a port that drops them leaves a dialog no assistive
- * technology can find from the control that opens it.
- */
-function markTrigger(element) {
-    element.setAttribute('aria-haspopup', 'dialog');
-    element.setAttribute('aria-controls', POPOVER_ID);
-    element.setAttribute('aria-expanded', 'false');
-}
-class CrtrTextElement extends HTMLElement {
-    /** The host marks a resolved or canceled page `inert`; that is this element's read-only signal. */
-    static observedAttributes = ['inert'];
-    #root;
-    #container = document.createElement('div');
-    #label = document.createElement('p');
-    #toolbar = document.createElement('div');
-    #editedBadge = document.createElement('span');
-    #wholeComment = document.createElement('button');
-    #editToggle = document.createElement('button');
-    #editLabel = document.createElement('span');
-    #surface = document.createElement('div');
-    #editor = document.createElement('textarea');
-    #input = document.createElement('input');
-    #body = document.createElement('div');
-    #prose = document.createElement('div');
-    #selectionComment = document.createElement('button');
-    #rail = document.createElement('div');
-    #railCount = document.createElement('span');
-    #railChips = document.createElement('div');
-    #popover = document.createElement('div');
-    #popoverSubject = document.createElement('p');
-    #popoverQuote = document.createElement('blockquote');
-    #popoverInput = document.createElement('textarea');
-    #popoverHint = document.createElement('span');
-    #popoverSave = document.createElement('button');
-    #popoverCancel = document.createElement('button');
-    #config = { initialText: '' };
-    #slotId;
-    #singleLine = false;
-    #text = '';
-    #comments = [];
-    #editing = false;
-    #live = false;
-    #draft = null;
-    #open = null;
-    /** Live only while the popover is open: its composer resizes, and the room reserved for it must follow. */
-    #popoverResize = new ResizeObserver(() => {
-        const open = this.#open;
-        if (open !== null)
-            this.#positionPopover(open.trigger, open.align);
-    });
-    constructor() {
-        super();
-        this.#root = this.attachShadow({ mode: 'open' });
-        const style = document.createElement('style');
-        style.textContent = STYLE;
-        this.#container.part.add('container');
-        this.#label.part.add('label');
-        this.#label.id = LABEL_ID;
-        this.#label.hidden = true;
-        this.#toolbar.part.add('toolbar');
-        this.#editedBadge.part.add('edited');
-        this.#editedBadge.textContent = 'edited';
-        this.#editedBadge.hidden = true;
-        this.#wholeComment.type = 'button';
-        this.#wholeComment.part.add('comment-trigger');
-        this.#wholeComment.part.add('whole-comment');
-        markTrigger(this.#wholeComment);
-        this.#wholeComment.addEventListener('click', () => {
-            this.#openComment(WHOLE, WHOLE_TARGET, this.#wholeComment, 'end');
-        });
-        this.#editToggle.type = 'button';
-        this.#editToggle.part.add('edit-toggle');
-        this.#editToggle.hidden = true;
-        this.#editToggle.append(this.#editLabel);
-        this.#editToggle.addEventListener('click', () => {
-            this.#editing = !this.#editing;
-            this.#clearDraft();
-            this.#renderSurface();
-            this.#renderToolbar();
-            if (this.#editing)
-                this.#editor.focus();
-            else
-                this.#body.focus();
-        });
-        this.#toolbar.append(this.#editedBadge, this.#wholeComment, this.#editToggle);
-        this.#surface.part.add('surface');
-        this.#editor.part.add('editor');
-        this.#editor.addEventListener('input', () => {
-            this.#text = this.#editor.value;
-            this.#renderToolbar();
-            this.#emit();
-        });
-        this.#input.type = 'text';
-        this.#input.part.add('input');
-        this.#input.addEventListener('input', () => {
-            this.#text = this.#input.value;
-            this.#renderToolbar();
-            this.#emit();
-        });
-        // A form field's Enter types nothing and submits nothing here: the page's own submit is the
-        // pager's modified chord, which this leaves alone.
-        this.#input.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' && !event.metaKey && !event.ctrlKey && !event.altKey)
-                event.preventDefault();
-        });
-        this.#body.part.add('body');
-        this.#body.tabIndex = 0;
-        this.#prose.part.add('prose');
-        this.#selectionComment.type = 'button';
-        this.#selectionComment.part.add('comment-trigger');
-        this.#selectionComment.part.add('selection-comment');
-        this.#selectionComment.hidden = true;
-        markTrigger(this.#selectionComment);
-        this.#selectionComment.append(icon(ICON_COMMENT_ADD), document.createTextNode('Comment'));
-        this.#selectionComment.addEventListener('mousedown', (event) => event.preventDefault());
-        this.#selectionComment.addEventListener('click', () => {
-            const draft = this.#draft;
-            if (draft === null)
-                return;
-            this.#openComment(draft.anchor, RANGE_TARGET, this.#selectionComment, 'start', draft.anchor.quote);
-        });
-        this.#body.append(this.#prose, this.#selectionComment);
-        this.#body.addEventListener('mouseup', () => this.#captureSelection());
-        this.#rail.part.add('comment-rail');
-        this.#rail.hidden = true;
-        this.#railCount.part.add('comment-count');
-        this.#railChips.part.add('comment-chips');
-        this.#rail.append(this.#railCount, this.#railChips);
-        this.#popover.part.add('popover');
-        this.#popover.hidden = true;
-        this.#popover.id = POPOVER_ID;
-        this.#popover.setAttribute('role', 'dialog');
-        this.#popoverSubject.part.add('popover-subject');
-        this.#popoverQuote.part.add('popover-quote');
-        this.#popoverQuote.hidden = true;
-        this.#popoverInput.part.add('popover-input');
-        this.#popoverInput.placeholder = 'What should the agent know about this?';
-        this.#popoverInput.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                this.#commitComment();
-            }
-        });
-        this.#popoverHint.part.add('popover-hint');
-        this.#popoverCancel.type = 'button';
-        this.#popoverCancel.part.add('popover-cancel');
-        this.#popoverCancel.textContent = 'Cancel';
-        this.#popoverCancel.addEventListener('click', () => this.#closeComment());
-        this.#popoverSave.type = 'button';
-        this.#popoverSave.part.add('popover-save');
-        this.#popoverSave.textContent = 'Save';
-        this.#popoverSave.addEventListener('click', () => this.#commitComment());
-        const actions = document.createElement('div');
-        actions.part.add('popover-actions');
-        const buttons = document.createElement('div');
-        buttons.part.add('popover-buttons');
-        buttons.append(this.#popoverCancel, this.#popoverSave);
-        actions.append(this.#popoverHint, buttons);
-        this.#popover.append(this.#popoverSubject, this.#popoverQuote, this.#popoverInput, actions);
-        this.#container.append(this.#label, this.#toolbar, this.#surface, this.#rail, this.#popover);
-        this.#root.append(style, this.#container);
-        this.addEventListener('keydown', this.#onKeyDown);
-    }
-    connectedCallback() {
-        if (this.#live)
-            return;
-        const read = readSlotConfig(this);
-        if (read.status !== 'ok') {
-            this.#renderUnavailable(read.reason);
-            return;
-        }
-        if (typeof read.config.initialText !== 'string') {
-            this.#renderUnavailable('text config has no initialText string');
-            return;
-        }
-        this.#live = true;
-        this.#config = read.config;
-        this.#singleLine = read.config.singleLine === true;
-        this.#surface.toggleAttribute('data-single-line', this.#singleLine);
-        this.#slotId = readSlotId(this);
-        this.#text = read.config.initialText;
-        this.#renderLabel();
-        this.#hydrate();
-        // A text slot the person never touches still has an answer — the words on screen — so the
-        // pager can report it at submit even though no change ever called `respond()`.
-        if (this.#slotId !== undefined)
-            registerSlotResponse(this, this.#slotId, () => this.#response());
-        this.#editing = this.#editable && this.#text.length === 0;
-        this.#renderToolbar();
-        this.#renderSurface();
-        this.#renderRail();
-    }
-    attributeChangedCallback() {
-        if (this.isConnected)
-            this.#syncReadOnly();
-    }
-    disconnectedCallback() {
-        document.removeEventListener('pointerdown', this.#onDocumentPointerDown, true);
-        this.#popoverResize.disconnect();
-    }
-    /**
-     * Seed local state from the answer the host is already holding, so a reopened page shows
-     * the edited words and the comments on them rather than the agent's original text. An
-     * uneditable slot keeps its authored text — only comments carry over — because a saved
-     * edit there could not have come from this control.
-     */
-    #hydrate() {
-        if (this.#slotId === undefined)
-            return;
-        const saved = savedResponse(this.#slotId);
-        if (saved === undefined)
-            return;
-        if ((this.#editable || this.#singleLine) && typeof saved.text === 'string')
-            this.#text = saved.text;
-        this.#comments = adoptComments(saved.comments);
-    }
-    /** The complete current response — what every change hands `respond()`. */
-    #response() {
-        return { text: this.#text, edited: this.#text !== this.#config.initialText, comments: this.#comments };
-    }
-    #emit() {
-        if (this.#slotId === undefined)
-            return;
-        respond(this.#slotId, this.#response());
-    }
-    // — rendering —————————————————————————————————————————————————————————————
-    #renderUnavailable(reason) {
-        const box = document.createElement('div');
-        box.part.add('unavailable');
-        box.setAttribute('role', 'status');
-        const detail = document.createElement('span');
-        detail.part.add('reason');
-        detail.textContent = reason;
-        box.append('Text unavailable: ', detail);
-        this.#container.replaceChildren(box);
-    }
-    /**
-     * The prompt names both faces of the surface, because the writing box and the prose body
-     * swap places under it and either one can be what the user is on.
-     */
-    #renderLabel() {
-        const label = this.#config.label;
-        const shown = label !== undefined && label !== '';
-        this.#label.hidden = !shown;
-        this.#label.textContent = shown ? label : '';
-        for (const surface of [this.#editor, this.#input, this.#body]) {
-            if (shown)
-                surface.setAttribute('aria-labelledby', LABEL_ID);
-            else
-                surface.removeAttribute('aria-labelledby');
-        }
-    }
-    #renderToolbar() {
-        // A field the agent left empty has nothing to differ FROM, so the badge would fire on the
-        // first keystroke and say nothing; it earns its place only over a prefill.
-        this.#editedBadge.hidden = this.#text === this.#config.initialText || (this.#singleLine && this.#config.initialText === '');
-        const whole = findComment(this.#comments, WHOLE);
-        this.#wholeComment.replaceChildren(icon(whole ? ICON_COMMENT : ICON_COMMENT_ADD));
-        this.#wholeComment.dataset.state = whole ? 'on' : 'off';
-        this.#wholeComment.setAttribute('aria-label', `${whole ? 'Edit comment on' : 'Comment on'} ${WHOLE_TARGET}`);
-        // No comment affordance where a comment has nowhere to go — see `canRecordComments`.
-        this.#wholeComment.hidden = this.#singleLine || !this.#commentable;
-        this.#editToggle.hidden = !this.#editable;
-        // In single-line mode the toolbar carries the badge alone, so it goes with it.
-        this.#toolbar.hidden = this.#singleLine && this.#editedBadge.hidden;
-        this.#editToggle.dataset.state = this.#editing ? 'on' : 'off';
-        this.#editLabel.textContent = this.#editing ? 'Done editing' : 'Edit text';
-        this.#editToggle.replaceChildren(icon(this.#editing ? ICON_DONE : ICON_EDIT), this.#editLabel);
-        this.#syncReadOnly();
-    }
-    /**
-     * Repainted with the toolbar, which is repainted on every state change. The writing box
-     * goes read-only rather than disabled, so a saved answer stays selectable and copyable;
-     * the edit toggle goes disabled, because a page that can no longer take an answer has
-     * nothing to toggle into.
-     */
-    #syncReadOnly() {
-        const readOnly = isReadOnly(this);
-        applyReadOnly(this.#root, readOnly);
-        // The editor lives outside the tree whenever the surface is showing prose, so the
-        // sweep over the shadow root never reaches it. The compact field is a writing box too:
-        // the sweep disables every input it finds, and this puts it back as read-only, which
-        // keeps a saved one-line answer selectable and copyable.
-        this.#editor.readOnly = readOnly;
-        this.#input.disabled = false;
-        this.#input.readOnly = readOnly;
-        this.#editToggle.disabled = readOnly;
-        // A page can go read-only while the popover is open — the host sets `inert` on a ticket
-        // that resolves under it. A box that can no longer save is closed rather than left there
-        // taking words nothing will keep.
-        if (readOnly && this.#open !== null)
-            this.#closeComment(false);
-    }
-    /** Multi-line text is a writing surface unless the author explicitly makes it review-only. */
-    get #editable() {
-        return !this.#singleLine && this.#config.editable !== false;
-    }
-    /** Whether this slot can keep a comment — see `canRecordComments`. */
-    get #commentable() {
-        return canRecordComments(this.#slotId);
-    }
-    #renderSurface() {
-        if (this.#singleLine) {
-            if (this.#input.value !== this.#text)
-                this.#input.value = this.#text;
-            this.#input.placeholder = this.#config.placeholder ?? '';
-            if (this.#surface.firstChild !== this.#input)
-                this.#surface.replaceChildren(this.#input);
-            return;
-        }
-        if (this.#editing) {
-            if (this.#editor.value !== this.#text)
-                this.#editor.value = this.#text;
-            this.#editor.placeholder = this.#config.placeholder ?? 'Write your answer\u2026';
-            if (this.#surface.firstChild !== this.#editor)
-                this.#surface.replaceChildren(this.#editor);
-            return;
-        }
-        if (this.#surface.firstChild !== this.#body)
-            this.#surface.replaceChildren(this.#body);
-        this.#renderProse();
-    }
-    #renderProse() {
-        const paragraphs = splitParagraphs(this.#text);
-        if (paragraphs.length === 0) {
-            const empty = document.createElement('p');
-            empty.part.add('placeholder');
-            empty.textContent = this.#config.placeholder ?? 'Nothing yet.';
-            this.#prose.replaceChildren(empty);
-            return;
-        }
-        const rendered = paragraphs.map((paragraph) => {
-            const element = document.createElement('p');
-            element.dataset.paragraph = '';
-            element.dataset.start = String(paragraph.start);
-            for (const segment of segmentParagraph(paragraph, this.#comments)) {
-                element.append(segment.comment ? this.#renderCommented(segment.text, segment.comment) : segment.text);
-            }
-            return element;
-        });
-        this.#prose.replaceChildren(...rendered);
-    }
-    /**
-     * A saved range comment in place. The highlight is both the durable anchor and the hover
-     * target: the comment opens over the words it refers to, while the chip rail below remains
-     * the editing path.
-     */
-    #renderCommented(text, comment) {
-        const span = document.createElement('span');
-        span.part.add('commented');
-        span.tabIndex = 0;
-        span.dataset.commentId = comment.id;
-        markTrigger(span);
-        const bubble = document.createElement('span');
-        bubble.part.add('comment-bubble');
-        bubble.setAttribute('role', 'note');
-        const label = document.createElement('span');
-        label.part.add('bubble-label');
-        label.textContent = 'Comment';
-        const body = document.createElement('span');
-        body.textContent = comment.text;
-        bubble.append(label, body);
-        span.append(text, bubble);
-        return span;
-    }
-    #renderRail() {
-        const count = this.#comments.length;
-        this.#rail.hidden = count === 0;
-        if (count === 0) {
-            this.#railChips.replaceChildren();
-            return;
-        }
-        this.#railCount.textContent = `${count} comment${count === 1 ? '' : 's'}`;
-        const chips = this.#comments.map((comment) => {
-            const chip = document.createElement('button');
-            chip.type = 'button';
-            chip.part.add('comment-trigger');
-            chip.part.add('comment-chip');
-            chip.dataset.commentId = comment.id;
-            markTrigger(chip);
-            const label = document.createElement('span');
-            label.textContent = comment.text;
-            chip.append(icon(ICON_COMMENT), label);
-            const range = comment.anchor.kind === 'range' ? comment.anchor : undefined;
-            chip.setAttribute('aria-label', `Edit comment on ${range ? RANGE_TARGET : WHOLE_TARGET}`);
-            chip.addEventListener('click', () => {
-                this.#openComment(comment.anchor, range ? RANGE_TARGET : WHOLE_TARGET, chip, 'start', range?.quote);
-            });
-            return chip;
-        });
-        this.#railChips.replaceChildren(...chips);
-    }
-    // — selection ——————————————————————————————————————————————————————————————
-    /**
-     * Reads the live selection as a range anchor. One anchor is one paragraph: a comment
-     * spanning a paragraph break has no readable quote, and the review UIs worth copying all
-     * draw the same line. The boundary resolver deliberately treats an end at offset 0 of the
-     * next paragraph as the end of the previous one — that is the DOM range browsers produce
-     * for a normal whole-paragraph selection.
-     */
-    #readSelection() {
-        const range = selectionRange(this.#root, this.#body);
-        if (range === null)
-            return null;
-        const start = paragraphBoundary(this.#body, range.startContainer, range.startOffset, 'start');
-        const end = paragraphBoundary(this.#body, range.endContainer, range.endOffset, 'end');
-        if (start === null || end === null || start.paragraph !== end.paragraph)
-            return null;
-        const paragraphStart = Number(start.paragraph.dataset.start ?? '0');
-        const from = paragraphStart + start.offset;
-        const to = paragraphStart + end.offset;
-        if (to <= from)
-            return null;
-        const rect = range.getBoundingClientRect();
-        const bounds = this.#body.getBoundingClientRect();
-        return {
-            anchor: { kind: 'range', start: from, end: to, quote: this.#text.slice(from, to) },
-            left: rect.left - bounds.left,
-            top: rect.bottom - bounds.top + 4,
-        };
-    }
-    /**
-     * The affordance is anchored to the selection rather than to a toolbar, so commenting
-     * starts where the user is looking.
-     */
-    #captureSelection() {
-        if (this.#editing || this.#open !== null || !this.#commentable)
-            return;
-        const draft = this.#readSelection();
-        if (draft === null) {
-            this.#clearDraft();
-            return;
-        }
-        this.#draft = draft;
-        this.#selectionComment.hidden = false;
-        this.#selectionComment.style.left = `${draft.left}px`;
-        this.#selectionComment.style.top = `${draft.top}px`;
-    }
-    #clearDraft() {
-        this.#draft = null;
-        this.#selectionComment.hidden = true;
-    }
-    // — the comment popover ————————————————————————————————————————————————————
-    #openComment(anchor, target, trigger, align, quote) {
-        // The popover opens only where its comment can land: never on a slot that cannot record
-        // one, and never on a read-only page, whose textareas are already `readOnly`, so it would
-        // take focus and refuse every keystroke.
-        if (!this.#commentable || isReadOnly(this))
-            return;
-        // Invoking the trigger of the open popover closes it, and moving to another trigger
-        // hands the open state over — the popover is one dialog, and exactly one control at a
-        // time reports itself as expanded.
-        const previous = this.#open;
-        if (previous !== null) {
-            if (previous.trigger === trigger) {
-                this.#closeComment();
-                return;
-            }
-            previous.trigger.setAttribute('aria-expanded', 'false');
-        }
-        const existing = findComment(this.#comments, anchor);
-        this.#open = { anchor, trigger, align };
-        trigger.setAttribute('aria-expanded', 'true');
-        this.#popoverSubject.textContent = `Comment on ${target}`;
-        this.#popover.setAttribute('aria-label', `Comment on ${target}`);
-        const preview = quotePreview(quote ?? '');
-        this.#popoverQuote.hidden = preview === '';
-        this.#popoverQuote.textContent = preview;
-        // The box is seeded from the saved comment every time it opens, so an abandoned edit
-        // never leaks into the next one.
-        this.#popoverInput.value = existing?.text ?? '';
-        this.#popoverHint.textContent = existing ? 'empty to delete' : '\u2318\u21b5 to save';
-        this.#popover.hidden = false;
-        this.#positionPopover(trigger, align);
-        // The composer is draggable-tall; observing the open popover keeps the reserved room in
-        // step with it, so a resized box never pushes its own actions past the frame.
-        this.#popoverResize.observe(this.#popover);
-        this.#popoverInput.focus();
-        document.addEventListener('pointerdown', this.#onDocumentPointerDown, true);
-    }
-    #positionPopover(trigger, align) {
-        // Start from the page's natural height. A previous open may have reserved room for a
-        // lower-edge composer, and measuring against that stale room would make it accumulate.
-        this.#container.style.paddingBottom = '';
-        const bounds = this.#container.getBoundingClientRect();
-        const rect = trigger.getBoundingClientRect();
-        const width = this.#popover.offsetWidth;
-        const height = this.#popover.offsetHeight;
-        const raw = align === 'end' ? rect.right - bounds.left - width : rect.left - bounds.left;
-        const left = Math.min(Math.max(raw, 0), Math.max(0, bounds.width - width));
-        const below = rect.bottom + POPOVER_GAP + height <= window.innerHeight;
-        const above = rect.top - POPOVER_GAP - height >= 0;
-        const top = !below && above
-            ? rect.top - bounds.top - POPOVER_GAP - height
-            : rect.bottom - bounds.top + POPOVER_GAP;
-        this.#popover.style.left = `${left}px`;
-        this.#popover.style.top = `${top}px`;
-        // An inline Gateway frame reports the body's in-flow height. Absolute popovers do not
-        // contribute to that measurement, so reserve only the missing tail when neither side can
-        // hold the composer. The host then grows the iframe and the entire writing box stays live.
-        const overflow = this.#popover.getBoundingClientRect().bottom - document.body.getBoundingClientRect().bottom;
-        if (overflow > 0)
-            this.#container.style.paddingBottom = `${overflow}px`;
-    }
-    #closeComment(restoreFocus = true) {
-        const open = this.#open;
-        this.#open = null;
-        this.#popover.hidden = true;
-        this.#popoverResize.disconnect();
-        this.#container.style.paddingBottom = '';
-        open?.trigger.setAttribute('aria-expanded', 'false');
-        document.removeEventListener('pointerdown', this.#onDocumentPointerDown, true);
-        const returnFocus = open !== null && open.trigger !== this.#selectionComment ? open.trigger : this.#body;
-        this.#clearDraft();
-        if (restoreFocus && this.#root.contains(returnFocus))
-            returnFocus.focus();
-    }
-    /** Clearing the box and saving deletes the comment; `setComment` is where that lives. */
-    #commitComment() {
-        const open = this.#open;
-        if (open === null || isReadOnly(this))
-            return;
-        // Saving replaces every highlight and every chip, so a trigger living in either is
-        // about to be detached: close without restoring focus to that doomed node, then hand
-        // focus to the node that now stands for the same anchor so j/k/c keep working.
-        const anchored = this.#prose.contains(open.trigger) || this.#railChips.contains(open.trigger);
-        this.#comments = setComment(this.#comments, open.anchor, this.#popoverInput.value);
-        this.#closeComment(!anchored);
-        this.#renderToolbar();
-        if (!this.#editing && !this.#singleLine)
-            this.#renderProse();
-        this.#renderRail();
-        if (anchored)
-            this.#refocusAnchor(open.anchor);
-        this.#emit();
-    }
-    /** Focus the freshly rendered highlight or chip for an anchor; the body when it is gone. */
-    #refocusAnchor(anchor) {
-        const id = findComment(this.#comments, anchor)?.id;
-        const selector = id === undefined ? null : `[data-comment-id="${CSS.escape(id)}"]`;
-        const replacement = selector === null
-            ? null
-            : (this.#prose.querySelector(selector) ??
-                this.#railChips.querySelector(selector));
-        const target = replacement ?? this.#body;
-        if (this.#root.contains(target))
-            target.focus();
-    }
-    #onDocumentPointerDown = (event) => {
-        if (this.#open === null)
-            return;
-        const path = event.composedPath();
-        if (path.includes(this.#popover) || path.includes(this.#open.trigger))
-            return;
-        this.#closeComment();
-    };
-    // — the kit's keyboard grammar ——————————————————————————————————————————————
-    #onKeyDown = (event) => {
-        if (event.defaultPrevented)
-            return;
-        if (event.key === 'Escape' && this.#open !== null) {
-            event.preventDefault();
-            this.#closeComment();
-            return;
-        }
-        if (this.#open !== null || this.#editing)
-            return;
-        const focus = event.composedPath()[0];
-        if (focus instanceof HTMLElement && (focus.tagName === 'TEXTAREA' || focus.tagName === 'INPUT'))
-            return;
-        if (event.metaKey || event.ctrlKey || event.altKey)
-            return;
-        if (event.key === 'j' || event.key === 'k') {
-            event.preventDefault();
-            this.#moveHighlight(event.key === 'j' ? 1 : -1);
-            return;
-        }
-        if (event.key === 'c') {
-            event.preventDefault();
-            this.#commentFocusedAnchor();
-        }
-    };
-    #highlights() {
-        return Array.from(this.#prose.querySelectorAll('[part~="commented"]'));
-    }
-    #moveHighlight(delta) {
-        const spans = this.#highlights();
-        if (spans.length === 0)
-            return;
-        const active = this.#root.activeElement;
-        const current = active instanceof HTMLElement ? spans.indexOf(active) : -1;
-        const next = current === -1 ? (delta > 0 ? 0 : spans.length - 1) : current + delta;
-        const target = spans[Math.min(Math.max(next, 0), spans.length - 1)];
-        target?.focus();
-    }
-    /**
-     * `c` comments what the user is on: a live selection first, then a focused highlight, and
-     * the whole passage when neither says otherwise.
-     */
-    #commentFocusedAnchor() {
-        // A one-line field has no passage to anchor against, and the shape offers no way to write
-        // a comment; the chips a saved answer arrived with stay clickable, and that is the whole path.
-        // The same key must not raise the selection button on a slot that cannot record what it
-        // would take — this is the one comment path that shows an affordance before opening it.
-        if (this.#singleLine || !this.#commentable)
-            return;
-        const draft = this.#draft ?? this.#readSelection();
-        if (draft !== null) {
-            this.#draft = draft;
-            this.#selectionComment.hidden = false;
-            this.#selectionComment.style.left = `${draft.left}px`;
-            this.#selectionComment.style.top = `${draft.top}px`;
-            this.#openComment(draft.anchor, RANGE_TARGET, this.#selectionComment, 'start', draft.anchor.quote);
-            return;
-        }
-        const active = this.#root.activeElement;
-        if (active instanceof HTMLElement && active.dataset.commentId !== undefined) {
-            const comment = this.#comments.find((entry) => entry.id === active.dataset.commentId);
-            if (comment !== undefined) {
-                const range = comment.anchor.kind === 'range' ? comment.anchor : undefined;
-                const target = range === undefined ? WHOLE_TARGET : RANGE_TARGET;
-                this.#openComment(comment.anchor, target, active, 'start', range?.quote);
-                return;
-            }
-        }
-        this.#openComment(WHOLE, WHOLE_TARGET, this.#wholeComment, 'end');
-    }
-}
-registerElement('crtr-text', CrtrTextElement);