@north-light/crouter 0.3.196 → 0.3.198

package/dist/pages/elements/text.js

@@ -4,11 +4,17 @@
  *
  * The three shapes in the catalog are all this one element:
  *
- *  - a **draft** the user edits in place — `editable`, pre-filled;
- *  - **read** text the user leaves anchored comments on, review-style — select a range and
- *    the comment affordance appears at the selection;
+ *  - 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
@@ -22,15 +28,20 @@
  * 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 { adoptComments, findComment, setComment } from '../comments.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;
@@ -39,7 +50,14 @@ const STYLE = `
   [part="container"] {
     position: relative;
     display: grid;
-    gap: var(--crtr-space-2);
+    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"] {
@@ -47,134 +65,178 @@ const STYLE = `
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--crtr-space-2);
+    gap: var(--crtr-text-toolbar-gap, var(--crtr-space-2));
   }
 
   [part="edited"] {
-    padding: 0 var(--crtr-space-2);
-    color: var(--crtr-color-accent);
-    background: color-mix(in srgb, var(--crtr-color-accent) 14%, transparent);
-    border-radius: var(--crtr-radius-small);
-    font-family: var(--crtr-font-mono);
-    font-size: 0.6875rem;
-    letter-spacing: 0.06em;
-    line-height: 1.7;
-    text-transform: uppercase;
+    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-space-1);
-    max-width: 100%;
-    padding: var(--crtr-space-1) var(--crtr-space-2);
-    color: var(--crtr-color-text-muted);
-    font: inherit;
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: var(--crtr-radius-small);
+    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-color-text);
-    background: var(--crtr-color-surface-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));
   }
 
-  button:focus-visible {
-    outline: 2px solid var(--crtr-color-focus);
-    outline-offset: 2px;
+${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));
   }
 
-  button[data-state="on"] {
-    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: 0.875rem;
-    height: 0.875rem;
+    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"] {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 10rem;
-    padding: var(--crtr-space-3) var(--crtr-space-4);
-    color: var(--crtr-color-text);
-    font: inherit;
-    line-height: var(--crtr-line-height);
-    background: var(--crtr-color-background);
-    border: 1px solid var(--crtr-color-border);
-    border-radius: var(--crtr-radius-medium);
+    min-height: var(--crtr-text-editor-min-height, 10em);
     resize: vertical;
   }
 
-  [part="editor"]:focus-visible,
-  [part="popover-input"]:focus-visible {
-    outline: 2px solid var(--crtr-color-focus);
-    outline-offset: -1px;
+  /* 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-space-3) var(--crtr-space-4);
-    background: var(--crtr-color-surface);
-    border: 1px solid var(--crtr-color-border);
-    border-radius: var(--crtr-radius-medium);
+    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: 2px solid var(--crtr-color-focus);
-    outline-offset: 2px;
+    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-space-3);
+    gap: var(--crtr-text-prose-gap, var(--crtr-space-3));
   }
 
   [part="prose"] p {
-    margin: 0;
+    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-color-text-muted);
+    color: var(--crtr-text-placeholder-text-color, var(--crtr-color-text-muted));
   }
 
   [part~="commented"] {
     position: relative;
-    border-radius: var(--crtr-radius-small);
-    background: color-mix(in srgb, var(--crtr-color-accent) 18%, transparent);
-    text-decoration: underline dotted;
-    text-decoration-color: var(--crtr-color-accent);
-    text-underline-offset: 4px;
+    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: none;
+    outline: var(--crtr-text-commented-outline, none);
   }
 
   [part~="commented"]:focus-visible {
-    outline: 2px solid var(--crtr-color-focus);
-    outline-offset: 2px;
+    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-space-1));
+    bottom: calc(100% + var(--crtr-text-comment-bubble-offset, var(--crtr-space-1)));
     left: 0;
     z-index: 2;
     display: grid;
-    gap: var(--crtr-space-1);
-    width: max-content;
-    max-width: 18rem;
-    padding: var(--crtr-space-2) var(--crtr-space-3);
-    color: var(--crtr-color-text);
-    background: var(--crtr-color-background);
-    border: 1px solid var(--crtr-color-border);
-    border-radius: var(--crtr-radius-medium);
-    box-shadow: var(--crtr-shadow);
+    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;
@@ -190,45 +252,46 @@ const STYLE = `
     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-color-text-muted);
-    font-family: var(--crtr-font-mono);
-    font-size: 0.6875rem;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
+    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-color-accent);
+    color: var(--crtr-text-bubble-label-text-color, var(--crtr-color-accent));
   }
 
   [part~="selection-comment"] {
     position: absolute;
     z-index: 3;
-    color: var(--crtr-color-accent);
-    background: var(--crtr-color-background);
-    border-color: color-mix(in srgb, var(--crtr-color-accent) 40%, transparent);
-    box-shadow: var(--crtr-shadow);
+    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-space-1);
+    gap: var(--crtr-text-comment-rail-gap, var(--crtr-space-1));
   }
 
   [part="comment-chips"] {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--crtr-space-2);
+    gap: var(--crtr-text-comment-chips-gap, var(--crtr-space-2));
   }
 
   [part~="comment-chip"] {
-    color: var(--crtr-color-text);
-    border-color: var(--crtr-color-border);
-    text-align: left;
+    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 {
@@ -242,17 +305,21 @@ const STYLE = `
     z-index: 5;
     box-sizing: border-box;
     display: grid;
-    gap: var(--crtr-space-2);
-    width: 20rem;
-    max-width: 100%;
-    padding: var(--crtr-space-3);
-    background: var(--crtr-color-background);
-    border: 1px solid var(--crtr-color-border);
-    border-radius: var(--crtr-radius-medium);
-    box-shadow: var(--crtr-shadow);
+    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],
@@ -261,29 +328,30 @@ const STYLE = `
     display: none;
   }
 
-  [part="popover-subject"],
-  [part="popover-quote"] {
-    margin: 0;
+  [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"] {
-    padding: var(--crtr-space-1) var(--crtr-space-2);
-    color: var(--crtr-color-text-muted);
-    background: color-mix(in srgb, var(--crtr-color-accent) 8%, transparent);
-    border-left: 2px solid color-mix(in srgb, var(--crtr-color-accent) 40%, transparent);
-    white-space: pre-wrap;
+    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"] {
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 5rem;
-    padding: var(--crtr-space-2);
-    color: var(--crtr-color-text);
-    font: inherit;
-    background: var(--crtr-color-surface);
-    border: 1px solid var(--crtr-color-border);
-    border-radius: var(--crtr-radius-small);
+    min-height: var(--crtr-text-popover-input-min-height, 5em);
     resize: vertical;
   }
 
@@ -291,41 +359,47 @@ const STYLE = `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--crtr-space-2);
+    gap: var(--crtr-text-popover-actions-gap, var(--crtr-space-2));
   }
 
   [part="popover-buttons"] {
     display: flex;
-    gap: var(--crtr-space-2);
+    gap: var(--crtr-text-popover-buttons-gap, var(--crtr-space-2));
   }
 
   [part="popover-save"] {
-    color: var(--crtr-color-accent-contrast);
-    background: var(--crtr-color-accent);
+    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-color-accent-contrast);
-    background: var(--crtr-color-accent);
-    opacity: 0.9;
+    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-color-border);
+    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-space-3);
-    color: var(--crtr-color-text-muted);
-    background: var(--crtr-color-surface);
-    border: 1px solid var(--crtr-color-border);
-    border-radius: var(--crtr-radius-medium);
-    box-shadow: var(--crtr-shadow);
+    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-color-text);
-    font-family: var(--crtr-font-mono);
+    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';
@@ -479,8 +553,11 @@ function markTrigger(element) {
     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');
@@ -488,6 +565,7 @@ class CrtrTextElement extends HTMLElement {
     #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');
@@ -503,18 +581,28 @@ class CrtrTextElement extends HTMLElement {
     #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';
@@ -548,6 +636,19 @@ class CrtrTextElement extends HTMLElement {
             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');
@@ -602,7 +703,7 @@ class CrtrTextElement extends HTMLElement {
         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.#toolbar, this.#surface, this.#rail, this.#popover);
+        this.#container.append(this.#label, this.#toolbar, this.#surface, this.#rail, this.#popover);
         this.#root.append(style, this.#container);
         this.addEventListener('keydown', this.#onKeyDown);
     }
@@ -620,16 +721,28 @@ class CrtrTextElement extends HTMLElement {
         }
         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();
-        this.#editing = read.config.editable === true && this.#text.length === 0;
+        // 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
@@ -643,7 +756,7 @@ class CrtrTextElement extends HTMLElement {
         const saved = savedResponse(this.#slotId);
         if (saved === undefined)
             return;
-        if (this.#config.editable === true && typeof saved.text === 'string')
+        if ((this.#editable || this.#singleLine) && typeof saved.text === 'string')
             this.#text = saved.text;
         this.#comments = adoptComments(saved.comments);
     }
@@ -667,18 +780,80 @@ class CrtrTextElement extends HTMLElement {
         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() {
-        this.#editedBadge.hidden = this.#text === this.#config.initialText;
+        // 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}`);
-        this.#editToggle.hidden = this.#config.editable !== true;
+        // 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' : 'Edit';
+        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;
@@ -795,7 +970,7 @@ class CrtrTextElement extends HTMLElement {
      * starts where the user is looking.
      */
     #captureSelection() {
-        if (this.#editing || this.#open !== null)
+        if (this.#editing || this.#open !== null || !this.#commentable)
             return;
         const draft = this.#readSelection();
         if (draft === null) {
@@ -813,6 +988,11 @@ class CrtrTextElement extends HTMLElement {
     }
     // — 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.
@@ -825,34 +1005,55 @@ class CrtrTextElement extends HTMLElement {
             previous.trigger.setAttribute('aria-expanded', 'false');
         }
         const existing = findComment(this.#comments, anchor);
-        this.#open = { anchor, trigger };
+        this.#open = { anchor, trigger, align };
         trigger.setAttribute('aria-expanded', 'true');
         this.#popoverSubject.textContent = `Comment on ${target}`;
         this.#popover.setAttribute('aria-label', `Comment on ${target}`);
-        this.#popoverQuote.hidden = quote === undefined || quote === '';
-        this.#popoverQuote.textContent = quote ?? '';
+        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 = `${rect.bottom - bounds.top + POPOVER_GAP}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;
@@ -863,7 +1064,7 @@ class CrtrTextElement extends HTMLElement {
     /** Clearing the box and saving deletes the comment; `setComment` is where that lives. */
     #commitComment() {
         const open = this.#open;
-        if (open === null)
+        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
@@ -872,7 +1073,7 @@ class CrtrTextElement extends HTMLElement {
         this.#comments = setComment(this.#comments, open.anchor, this.#popoverInput.value);
         this.#closeComment(!anchored);
         this.#renderToolbar();
-        if (!this.#editing)
+        if (!this.#editing && !this.#singleLine)
             this.#renderProse();
         this.#renderRail();
         if (anchored)
@@ -943,6 +1144,12 @@ class CrtrTextElement extends HTMLElement {
      * 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;