@north-light/crouter 0.3.198 → 0.3.199

package/dist/pages/elements/options.js

@@ -1,742 +0,0 @@
-/**
- * `<crtr-options>` — the agent asks a multiple-choice question.
- *
- * A port of the interaction kit's `agent-options` (Northlight
- * `apps/gateway/components/agent-ui/agent-options.tsx` @ `3705fe9e2`) onto a dependency-free
- * custom element, keeping its two load-bearing decisions:
- *
- *  - **The control's silhouette tells the truth about how many answers are wanted.**
- *    Single-select is a radio group, multi-select is checkbox rows, so the element never has
- *    to say "pick one" in prose.
- *  - **"This one, but…" is a first-class answer.** Every option carries the comment
- *    affordance in place, rather than making the user squeeze a caveat into the freetext box
- *    at the bottom. The affordance is quiet until you reach for it — it reveals on hover, on
- *    keyboard focus, and on the `j`/`k` cursor — and stays lit once a comment exists, which
- *    is the whole "there is a note here" signal at a glance.
- *
- * Selection is kept in the agent's authored order, never click order, so the response reads
- * the way the question did. `freetext` is absent rather than empty: the response says whether
- * the user wrote something, not whether the box existed.
- *
- * Every styling value this element paints is read through a `--crtr-options-*` component
- * token, so a host restyles the question without touching crtr. Paint that the bundle shares —
- * the option controls, the two writing boxes, the focus ring on every button — chains through
- * the `--crtr-control-*` family behind its element token, which is what keeps a comment box
- * here identical to one in `<crtr-text>` unless a host deliberately parts them. Each anatomy
- * part carries its own scope: the option row and the control inside it, the comment trigger
- * and the box it opens, and the two buttons in that box are five things a person can point at,
- * so they are five scopes rather than one shared name meaning two different rectangles.
- */
-import { adoptComments, canRecordComments, setComment, findComment } from '../comments.js';
-import { controlStyle, focusRingStyle, writingBoxStyle } from '../controls.js';
-import { respond, savedIds, savedResponse } from '../host.js';
-import { applyReadOnly, isReadOnly } from '../readonly.js';
-import { registerElement } from '../register.js';
-import { registerSlotResponse } from '../responses.js';
-import { readSlotConfig, readSlotId } from '../slot-config.js';
-const BUBBLE_PLUS = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z"/><path d="M8 5.5v3M6.5 7h3"/></svg>';
-const BUBBLE_TEXT = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z"/><path d="M5 6.25h6M5 8.25h4"/></svg>';
-const STYLE = `
-  :host {
-    display: block;
-  }
-
-  [part="container"] {
-    display: grid;
-    gap: var(--crtr-options-container-gap, var(--crtr-space-3));
-  }
-
-  /* The question reads as the agent's own prose above its control, matching the table's
-     caption rather than shouting over the options it introduces. */
-  [part="label"] {
-    margin: var(--crtr-options-label-margin, 0);
-    color: var(--crtr-options-label-text-color, var(--crtr-color-text-muted));
-  }
-
-  [part="list"] {
-    display: grid;
-    gap: var(--crtr-options-list-gap, var(--crtr-space-2));
-  }
-
-  [part="option"] {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    gap: var(--crtr-options-option-gap, var(--crtr-space-3));
-    padding: var(--crtr-options-option-padding, var(--crtr-space-2) var(--crtr-space-3));
-    background: var(--crtr-options-option-fill, var(--crtr-color-surface));
-    border: var(--crtr-options-option-border-width, 1px)
-      var(--crtr-options-option-border-style, solid)
-      var(--crtr-options-option-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-options-option-radius, var(--crtr-radius-medium));
-    transition: background-color var(--crtr-options-option-transition, 120ms ease),
-      border-color var(--crtr-options-option-transition, 120ms ease);
-  }
-
-  [part="option"]:hover,
-  [part="option"][data-active="true"] {
-    background: var(--crtr-options-option-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-  [part="option"][data-selected="true"] {
-    border-color: var(
-      --crtr-options-option-selected-border-color,
-      color-mix(in srgb, var(--crtr-color-accent) 45%, transparent)
-    );
-    background: var(
-      --crtr-options-option-selected-fill,
-      color-mix(in srgb, var(--crtr-color-accent) 10%, transparent)
-    );
-  }
-
-  [part="option"][data-selected="true"]:hover,
-  [part="option"][data-selected="true"][data-active="true"] {
-    background: var(
-      --crtr-options-option-selected-hover-fill,
-      color-mix(in srgb, var(--crtr-color-accent) 14%, transparent)
-    );
-  }
-
-  /* A page that can no longer take an answer keeps its selection legible and drops every
-     affordance that says it could still be changed. */
-  [part="option"]:has([part="option-control"]:disabled) [part="option-label"] {
-    cursor: default;
-  }
-
-  [part="option-label"] {
-    display: flex;
-    flex: 1;
-    align-items: flex-start;
-    gap: var(--crtr-options-option-label-gap, var(--crtr-space-3));
-    cursor: pointer;
-  }
-
-  ${controlStyle({ scope: 'options-option-control' }, '[part="option-control"]')}
-
-  /* Centred on the first line of the label rather than on its box, so a two-line option keeps
-     the control beside the title. Half the difference between a 1.5 line box and the control. */
-  [part="option-control"] {
-    margin-top: var(--crtr-options-option-control-offset, 0.1875em);
-  }
-
-  [part="option-text"] {
-    display: grid;
-    gap: var(--crtr-options-option-text-gap, var(--crtr-space-1));
-  }
-
-  [part="option-title"] {
-    font-weight: var(--crtr-options-option-title-font-weight, 500);
-  }
-
-  [part="option-description"] {
-    color: var(--crtr-options-option-description-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-options-option-description-font-size, 0.875em);
-  }
-
-  /* The trigger stays in the row's anatomy while quiet, then its state rule below reveals it.
-     A host can choose how quiet and how bright those states are independently; the transition
-     remains one knob because all three properties are one reveal. */
-  [part="comment"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: none;
-    width: var(--crtr-options-comment-size, 1.5em);
-    height: var(--crtr-options-comment-size, 1.5em);
-    padding: var(--crtr-options-comment-padding, 0);
-    color: var(--crtr-options-comment-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-options-comment-fill, transparent);
-    border: var(--crtr-options-comment-border-width, 1px)
-      var(--crtr-options-comment-border-style, solid)
-      var(--crtr-options-comment-border-color, transparent);
-    border-radius: var(--crtr-options-comment-radius, var(--crtr-radius-small));
-    opacity: var(--crtr-options-comment-opacity, 0);
-    cursor: pointer;
-    transition: opacity var(--crtr-options-comment-transition, var(--crtr-control-transition, 120ms ease)),
-      color var(--crtr-options-comment-transition, var(--crtr-control-transition, 120ms ease)),
-      background-color var(--crtr-options-comment-transition, var(--crtr-control-transition, 120ms ease));
-  }
-
-  [part="option"]:hover [part="comment"],
-  [part="option"][data-active="true"] [part="comment"],
-  [part="option"]:focus-within [part="comment"],
-  [part="comment"][data-state="commented"],
-  [part="comment"][aria-expanded="true"] {
-    opacity: var(--crtr-options-comment-visible-opacity, 1);
-  }
-
-  [part="comment"]:hover {
-    background: var(--crtr-options-comment-hover-fill, var(--crtr-color-surface-hover));
-    border-color: var(--crtr-options-comment-hover-border-color, var(--crtr-color-border));
-  }
-
-${focusRingStyle({ scope: 'options-comment' }, '[part="comment"]')}
-  [part="comment"][data-state="commented"] {
-    color: var(--crtr-options-comment-commented-text-color, var(--crtr-color-accent));
-  }
-
-  [part="comment"] svg {
-    width: var(--crtr-options-comment-icon-size, 0.875em);
-    height: var(--crtr-options-comment-icon-size, 0.875em);
-    fill: var(--crtr-options-comment-icon-fill, none);
-    stroke: var(--crtr-options-comment-icon-stroke-color, currentColor);
-    stroke-width: var(--crtr-options-comment-icon-stroke-width, 1.25);
-    stroke-linecap: var(--crtr-options-comment-icon-stroke-cap, round);
-    stroke-linejoin: var(--crtr-options-comment-icon-stroke-join, round);
-  }
-
-  [part="comment-popover"] {
-    position: absolute;
-    top: calc(100% + var(--crtr-options-comment-popover-offset, var(--crtr-space-1)));
-    right: 0;
-    z-index: 2;
-    display: grid;
-    gap: var(--crtr-options-comment-popover-gap, var(--crtr-space-2));
-    width: var(--crtr-options-comment-popover-width, min(20em, 100%));
-    padding: var(--crtr-options-comment-popover-padding, var(--crtr-space-3));
-    background: var(--crtr-options-comment-popover-fill, var(--crtr-color-background));
-    border: var(--crtr-options-comment-popover-border-width, 1px)
-      var(--crtr-options-comment-popover-border-style, solid)
-      var(--crtr-options-comment-popover-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-options-comment-popover-radius, var(--crtr-radius-medium));
-    box-shadow: var(--crtr-options-comment-popover-shadow, var(--crtr-shadow));
-  }
-
-  [part="comment-popover"][hidden] {
-    display: none;
-  }
-
-  /* The popover's own prose, in the page's voice — not a caps-mono field label shouting an
-     option id at someone who just clicked that option. */
-  [part="comment-subject"] {
-    margin: var(--crtr-options-comment-subject-margin, 0);
-    color: var(--crtr-options-comment-subject-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-options-comment-subject-font-size, 0.875em);
-  }
-
-  /* Two calls rather than one selector list: a comment box and the freetext box are two things
-     a person can point at, so each takes its own scope. They still share the family layer
-     underneath, so they cannot drift apart unless a host parts them on purpose. */
-${writingBoxStyle({ scope: 'options-comment-input' }, '[part="comment-input"]')}
-${writingBoxStyle({ scope: 'options-freetext-input' }, '[part="freetext-input"]')}
-  [part="comment-input"] {
-    min-height: var(--crtr-options-comment-input-min-height, 4.5em);
-    resize: vertical;
-  }
-
-  [part="freetext-input"] {
-    min-height: var(--crtr-options-freetext-input-min-height, 4em);
-    resize: vertical;
-  }
-
-  [part="comment-actions"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--crtr-options-comment-actions-gap, var(--crtr-space-2));
-  }
-
-  [part="comment-hint"] {
-    color: var(--crtr-options-comment-hint-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-options-comment-hint-font-size, 0.875em);
-  }
-
-  /* The two buttons are one shape drawn twice rather than one rule serving two parts, because
-     a scope that named both would make "the cancel button's fill" unsayable. */
-  [part="comment-cancel"] {
-    padding: var(--crtr-options-comment-cancel-padding, var(--crtr-space-1) var(--crtr-space-2));
-    font: var(--crtr-options-comment-cancel-font, inherit);
-    font-size: var(--crtr-options-comment-cancel-font-size, 0.875em);
-    color: var(--crtr-options-comment-cancel-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-options-comment-cancel-fill, transparent);
-    border: var(--crtr-options-comment-cancel-border-width, 1px)
-      var(--crtr-options-comment-cancel-border-style, solid)
-      var(--crtr-options-comment-cancel-border-color, transparent);
-    border-radius: var(--crtr-options-comment-cancel-radius, var(--crtr-radius-small));
-    cursor: pointer;
-    transition: color var(--crtr-options-comment-cancel-transition, var(--crtr-control-transition, 120ms ease)),
-      background-color var(--crtr-options-comment-cancel-transition, var(--crtr-control-transition, 120ms ease)),
-      border-color var(--crtr-options-comment-cancel-transition, var(--crtr-control-transition, 120ms ease));
-  }
-
-  [part="comment-cancel"]:hover {
-    color: var(--crtr-options-comment-cancel-hover-text-color, var(--crtr-color-text));
-    background: var(--crtr-options-comment-cancel-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-  [part="comment-save"] {
-    padding: var(--crtr-options-comment-save-padding, var(--crtr-space-1) var(--crtr-space-2));
-    font: var(--crtr-options-comment-save-font, inherit);
-    font-size: var(--crtr-options-comment-save-font-size, 0.875em);
-    color: var(--crtr-options-comment-save-text-color, var(--crtr-color-accent-contrast));
-    background: var(--crtr-options-comment-save-fill, var(--crtr-color-accent));
-    border: var(--crtr-options-comment-save-border-width, 1px)
-      var(--crtr-options-comment-save-border-style, solid)
-      var(--crtr-options-comment-save-border-color, var(--crtr-color-accent));
-    border-radius: var(--crtr-options-comment-save-radius, var(--crtr-radius-small));
-    cursor: pointer;
-    transition: color var(--crtr-options-comment-save-transition, var(--crtr-control-transition, 120ms ease)),
-      background-color var(--crtr-options-comment-save-transition, var(--crtr-control-transition, 120ms ease)),
-      border-color var(--crtr-options-comment-save-transition, var(--crtr-control-transition, 120ms ease));
-  }
-
-  /* Mixing the accent toward the text colour darkens on a light token set and lightens on a
-     dark one — a brightness filter moves the wrong way on one of them. */
-  [part="comment-save"]:hover {
-    background: var(
-      --crtr-options-comment-save-hover-fill,
-      color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text))
-    );
-    border-color: var(
-      --crtr-options-comment-save-hover-border-color,
-      color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text))
-    );
-  }
-
-${focusRingStyle({ scope: 'options-comment-cancel' }, '[part="comment-cancel"]')}
-${focusRingStyle({ scope: 'options-comment-save' }, '[part="comment-save"]')}
-  [part="freetext"] {
-    display: grid;
-    gap: var(--crtr-options-freetext-gap, var(--crtr-space-1));
-  }
-
-  [part="freetext-label"] {
-    color: var(--crtr-options-freetext-label-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-options-freetext-label-font-size, 0.875em);
-  }
-
-  [part="unavailable"] {
-    padding: var(--crtr-options-unavailable-padding, var(--crtr-space-3));
-    color: var(--crtr-options-unavailable-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-options-unavailable-fill, var(--crtr-color-surface));
-    border: var(--crtr-options-unavailable-border-width, 1px)
-      var(--crtr-options-unavailable-border-style, solid)
-      var(--crtr-options-unavailable-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-options-unavailable-radius, var(--crtr-radius-medium));
-  }
-
-  [part="reason"] {
-    color: var(--crtr-options-reason-text-color, var(--crtr-color-text));
-    font-family: var(--crtr-options-reason-font-family, var(--crtr-font-mono));
-  }
-`;
-/** Ids are scoped to this element's shadow root, so one constant is unique everywhere. */
-const LABEL_ID = 'prompt-label';
-let groupCounter = 0;
-/**
- * Whether a key belongs to something being written in rather than to the list grammar.
- * The option controls are real radios and checkboxes, so this deliberately admits them —
- * only prose entry (the comment box, the freetext box) swallows `j`/`k`/`x`/`c`.
- */
-function isTextEntry(target) {
-    if (target instanceof HTMLTextAreaElement)
-        return true;
-    if (target instanceof HTMLElement && target.isContentEditable)
-        return true;
-    if (!(target instanceof HTMLInputElement))
-        return false;
-    return target.type !== 'checkbox' && target.type !== 'radio';
-}
-class CrtrOptionsElement extends HTMLElement {
-    /** The host marks a resolved or canceled page `inert`; that is this element's read-only signal. */
-    static observedAttributes = ['inert'];
-    #shadow;
-    #config;
-    #slotId;
-    #rows = new Map();
-    #order = [];
-    #selected = [];
-    #comments = [];
-    #freetext;
-    #activeId;
-    #commentingId;
-    #built = false;
-    constructor() {
-        super();
-        this.#shadow = this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        if (this.#built)
-            return;
-        this.#built = true;
-        this.#slotId = readSlotId(this);
-        const read = readSlotConfig(this);
-        if (read.status !== 'ok') {
-            this.#renderUnavailable(read.reason);
-            return;
-        }
-        const config = read.config;
-        if (!Array.isArray(config.options) || config.options.length === 0) {
-            this.#renderUnavailable('options config lists no options');
-            return;
-        }
-        this.#config = config;
-        this.#order = config.options.map((option) => option.id);
-        this.#hydrate(config);
-        // Registered whether or not the person ever selects anything: the pager reports every
-        // response-bearing slot at submit, and an empty selection is an answer the host validates
-        // and names, where an absent slot is only a map the host cannot read.
-        if (this.#slotId !== undefined)
-            registerSlotResponse(this, this.#slotId, () => this.#response());
-        this.#render(config);
-        this.#sync();
-    }
-    disconnectedCallback() {
-        document.removeEventListener('pointerdown', this.#onDocumentPointerDown, true);
-    }
-    attributeChangedCallback() {
-        if (this.isConnected)
-            this.#syncReadOnly();
-    }
-    /** Read-only is repainted after every build, because a rebuild replaces the controls. */
-    #syncReadOnly() {
-        const readOnly = isReadOnly(this);
-        applyReadOnly(this.#shadow, readOnly);
-        // A page can go read-only while a box 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.#commentingId !== undefined)
-            this.#closeComment(false);
-    }
-    /**
-     * Seed local state from the answer the host is already holding, so a reopened page shows
-     * what it would submit. Ids that no longer name an option are dropped, and single-select
-     * keeps only the first, so a stale saved answer cannot put the control in a state the user
-     * could not have clicked into.
-     */
-    #hydrate(config) {
-        if (this.#slotId === undefined)
-            return;
-        const saved = savedResponse(this.#slotId);
-        if (saved === undefined)
-            return;
-        const selected = savedIds(saved.selectedOptionIds);
-        this.#selected = this.#order.filter((id) => selected.includes(id));
-        if (config.mode === 'single')
-            this.#selected = this.#selected.slice(0, 1);
-        this.#comments = adoptComments(saved.comments).filter((comment) => comment.anchor.kind !== 'option' || this.#order.includes(comment.anchor.optionId));
-        if (config.allowFreetext === true && typeof saved.freetext === 'string' && saved.freetext !== '') {
-            this.#freetext = saved.freetext;
-        }
-    }
-    /** The named state for a config this element cannot render — never a thrown error. */
-    #renderUnavailable(reason) {
-        const style = document.createElement('style');
-        style.textContent = STYLE;
-        const container = document.createElement('div');
-        container.part.add('unavailable');
-        container.setAttribute('role', 'status');
-        const detail = document.createElement('span');
-        detail.part.add('reason');
-        detail.textContent = reason;
-        container.append('Options unavailable: ', detail);
-        this.#shadow.replaceChildren(style, container);
-    }
-    #render(config) {
-        const style = document.createElement('style');
-        style.textContent = STYLE;
-        const container = document.createElement('div');
-        container.part.add('container');
-        const labelled = config.label !== undefined && config.label !== '';
-        if (labelled) {
-            const label = document.createElement('p');
-            label.part.add('label');
-            label.id = LABEL_ID;
-            label.textContent = config.label ?? '';
-            container.append(label);
-        }
-        const list = document.createElement('div');
-        list.part.add('list');
-        // A labelled multi-select is a named group of checkboxes; single-select is already one
-        // control, so the radiogroup role it always carries takes the name instead.
-        if (config.mode === 'single')
-            list.setAttribute('role', 'radiogroup');
-        else if (labelled)
-            list.setAttribute('role', 'group');
-        if (labelled)
-            list.setAttribute('aria-labelledby', LABEL_ID);
-        groupCounter += 1;
-        const group = `crtr-options-${groupCounter}`;
-        for (const option of config.options)
-            list.append(this.#renderOption(config, option, group));
-        container.append(list);
-        if (config.allowFreetext === true)
-            container.append(this.#renderFreetext(config));
-        // The grammar lives on the container, so it reaches every row and never escapes the
-        // shadow root: `j`/`k` move the cursor, `x` toggles it, `c` comments on it.
-        container.addEventListener('keydown', (event) => this.#onKeydown(event));
-        this.#shadow.replaceChildren(style, container);
-    }
-    #renderOption(config, option, group) {
-        const root = document.createElement('div');
-        root.part.add('option');
-        root.dataset.optionId = option.id;
-        const label = document.createElement('label');
-        label.part.add('option-label');
-        const control = document.createElement('input');
-        control.part.add('option-control');
-        control.type = config.mode === 'single' ? 'radio' : 'checkbox';
-        control.name = group;
-        control.value = option.id;
-        control.addEventListener('change', () => this.#toggle(option.id, control.checked));
-        control.addEventListener('focus', () => this.#setActive(option.id));
-        const text = document.createElement('span');
-        text.part.add('option-text');
-        const title = document.createElement('span');
-        title.part.add('option-title');
-        title.textContent = option.label;
-        text.append(title);
-        if (option.description !== undefined && option.description !== '') {
-            const description = document.createElement('span');
-            description.part.add('option-description');
-            description.textContent = option.description;
-            text.append(description);
-        }
-        label.append(control, text);
-        // No comment affordance where a comment has nowhere to go — see `canRecordComments`.
-        const parts = canRecordComments(this.#slotId) ? this.#buildComment(option) : undefined;
-        root.append(label);
-        if (parts !== undefined)
-            root.append(parts.trigger, parts.popover);
-        root.addEventListener('mouseenter', () => this.#setActive(option.id));
-        root.addEventListener('mouseleave', () => this.#clearActive(option.id));
-        this.#rows.set(option.id, {
-            id: option.id,
-            label: option.label,
-            root,
-            control,
-            ...(parts === undefined ? {} : { comment: parts }),
-        });
-        return root;
-    }
-    /** The trigger and its box, built together because they are only ever used together. */
-    #buildComment(option) {
-        const comment = document.createElement('button');
-        comment.part.add('comment');
-        comment.type = 'button';
-        comment.setAttribute('aria-haspopup', 'dialog');
-        comment.addEventListener('click', () => {
-            if (this.#commentingId === option.id)
-                this.#closeComment();
-            else
-                this.#openComment(option.id);
-        });
-        const popover = document.createElement('div');
-        popover.part.add('comment-popover');
-        popover.setAttribute('role', 'dialog');
-        popover.hidden = true;
-        const subject = document.createElement('p');
-        subject.part.add('comment-subject');
-        subject.textContent = `Comment on ${option.label}`;
-        popover.setAttribute('aria-label', subject.textContent);
-        const input = document.createElement('textarea');
-        input.part.add('comment-input');
-        input.placeholder = 'What should the agent know about this?';
-        input.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                this.#commitComment(option.id);
-                return;
-            }
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                this.#closeComment();
-            }
-        });
-        const actions = document.createElement('div');
-        actions.part.add('comment-actions');
-        const hint = document.createElement('span');
-        hint.part.add('comment-hint');
-        const buttons = document.createElement('span');
-        const cancel = document.createElement('button');
-        cancel.part.add('comment-cancel');
-        cancel.type = 'button';
-        cancel.textContent = 'Cancel';
-        cancel.addEventListener('click', () => this.#closeComment());
-        const save = document.createElement('button');
-        save.part.add('comment-save');
-        save.type = 'button';
-        save.textContent = 'Save';
-        save.addEventListener('click', () => this.#commitComment(option.id));
-        buttons.append(cancel, save);
-        actions.append(hint, buttons);
-        popover.append(subject, input, actions);
-        return { trigger: comment, popover, input, hint };
-    }
-    #renderFreetext(config) {
-        const wrapper = document.createElement('label');
-        wrapper.part.add('freetext');
-        const label = document.createElement('span');
-        label.part.add('freetext-label');
-        label.textContent = config.freetextLabel ?? 'Something else';
-        const input = document.createElement('textarea');
-        input.part.add('freetext-input');
-        input.placeholder = config.freetextPlaceholder ?? 'Answer in your own words…';
-        // Hydration runs before the render, so the saved words are already in local state.
-        if (this.#freetext !== undefined)
-            input.value = this.#freetext;
-        input.addEventListener('input', () => {
-            // Absent rather than empty — see the note on `freetext` in the response type.
-            this.#freetext = input.value === '' ? undefined : input.value;
-            this.#emit();
-        });
-        wrapper.append(label, input);
-        return wrapper;
-    }
-    #onKeydown(event) {
-        if (event.metaKey || event.ctrlKey || event.altKey)
-            return;
-        if (isTextEntry(event.target))
-            return;
-        const key = event.key.toLowerCase();
-        const current = this.#activeId ?? this.#selected.at(-1) ?? this.#order[0];
-        if (current === undefined)
-            return;
-        if (key === 'j' || key === 'k') {
-            event.preventDefault();
-            const index = Math.max(0, this.#order.indexOf(current));
-            const step = key === 'j' ? 1 : -1;
-            const next = this.#order[(index + step + this.#order.length) % this.#order.length];
-            this.#setActive(next);
-            this.#rows.get(next)?.control.focus();
-            return;
-        }
-        if (key === 'x') {
-            event.preventDefault();
-            const selected = this.#selected.includes(current);
-            this.#toggle(current, this.#config?.mode === 'single' ? true : !selected);
-            return;
-        }
-        if (key === 'c') {
-            event.preventDefault();
-            this.#openComment(current);
-        }
-    }
-    #setActive(optionId) {
-        if (this.#activeId === optionId)
-            return;
-        this.#activeId = optionId;
-        this.#sync();
-    }
-    #clearActive(optionId) {
-        if (this.#activeId !== optionId)
-            return;
-        this.#activeId = undefined;
-        this.#sync();
-    }
-    #toggle(optionId, selected) {
-        if (this.#config === undefined || isReadOnly(this))
-            return;
-        if (this.#config.mode === 'single') {
-            this.#selected = [optionId];
-        }
-        else {
-            const next = selected
-                ? [...this.#selected, optionId]
-                : this.#selected.filter((id) => id !== optionId);
-            // Kept in the agent's authored order, so the response reads the way the question did
-            // rather than in click order.
-            this.#selected = this.#order.filter((id) => next.includes(id));
-        }
-        this.#setActive(optionId);
-        this.#sync();
-        this.#emit();
-    }
-    /**
-     * A press anywhere but the open box and its trigger closes the box without committing,
-     * matching the kit's popover. It listens on the document rather than on this element,
-     * because "anywhere else" includes the rest of the page: `pointerdown` is composed, so the
-     * path still names the shadow nodes an inside press went through.
-     */
-    #onDocumentPointerDown = (event) => {
-        if (this.#commentingId === undefined)
-            return;
-        const parts = this.#rows.get(this.#commentingId)?.comment;
-        if (parts === undefined)
-            return;
-        const path = event.composedPath();
-        if (path.includes(parts.popover) || path.includes(parts.trigger))
-            return;
-        // No focus restore: the press is on its way somewhere else, and pulling focus back to
-        // the trigger would fight it.
-        this.#closeComment(false);
-    };
-    #openComment(optionId) {
-        const parts = this.#rows.get(optionId)?.comment;
-        // A box opens only where its comment can land: never on a read-only page, whose textareas
-        // are already `readOnly`, so it would take focus and refuse every keystroke.
-        if (parts === undefined || isReadOnly(this))
-            return;
-        if (this.#commentingId === undefined) {
-            document.addEventListener('pointerdown', this.#onDocumentPointerDown, true);
-        }
-        this.#commentingId = optionId;
-        this.#activeId = optionId;
-        // Seeded from the saved comment every time it opens.
-        parts.input.value = findComment(this.#comments, anchorFor(optionId))?.text ?? '';
-        this.#sync();
-        parts.input.focus();
-    }
-    #closeComment(restoreFocus = true) {
-        if (this.#commentingId === undefined)
-            return;
-        const parts = this.#rows.get(this.#commentingId)?.comment;
-        this.#commentingId = undefined;
-        document.removeEventListener('pointerdown', this.#onDocumentPointerDown, true);
-        this.#sync();
-        if (restoreFocus)
-            parts?.trigger.focus();
-    }
-    #commitComment(optionId) {
-        const parts = this.#rows.get(optionId)?.comment;
-        if (parts === undefined || isReadOnly(this))
-            return;
-        // Clearing the box deletes the comment — `setComment` treats empty text as removal, so
-        // there is no separate destructive control.
-        this.#comments = setComment(this.#comments, anchorFor(optionId), parts.input.value);
-        this.#closeComment();
-        this.#emit();
-    }
-    /** Paint every row from local state; local state is authoritative for rendering. */
-    #sync() {
-        for (const row of this.#rows.values()) {
-            const selected = this.#selected.includes(row.id);
-            row.control.checked = selected;
-            row.root.dataset.selected = String(selected);
-            row.root.dataset.active = String(this.#activeId === row.id);
-            const parts = row.comment;
-            if (parts === undefined)
-                continue;
-            const comment = findComment(this.#comments, anchorFor(row.id));
-            parts.trigger.dataset.state = comment === undefined ? 'empty' : 'commented';
-            parts.trigger.innerHTML = comment === undefined ? BUBBLE_PLUS : BUBBLE_TEXT;
-            parts.trigger.setAttribute('aria-label', comment === undefined ? `Comment on ${row.label}` : `Edit comment on ${row.label}`);
-            const open = this.#commentingId === row.id;
-            parts.trigger.setAttribute('aria-expanded', String(open));
-            parts.popover.hidden = !open;
-            parts.hint.textContent = comment === undefined ? '\u2318\u21b5 to save' : 'empty to delete';
-        }
-        this.#syncReadOnly();
-    }
-    /** The complete current response — what every change hands `respond()`. */
-    #response() {
-        const response = {
-            selectedOptionIds: [...this.#selected],
-            comments: this.#comments.map((comment) => ({ ...comment })),
-        };
-        if (this.#config?.allowFreetext === true && this.#freetext !== undefined) {
-            response.freetext = this.#freetext;
-        }
-        return response;
-    }
-    /** The complete current response, on every user change — never a delta. */
-    #emit() {
-        if (this.#slotId === undefined)
-            return;
-        respond(this.#slotId, this.#response());
-    }
-}
-function anchorFor(optionId) {
-    return { kind: 'option', optionId };
-}
-registerElement('crtr-options', CrtrOptionsElement);