@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/callout/CalloutBlock.svelte

@@ -0,0 +1,779 @@
+<script lang="ts">
+  /**
+   * callout block — note / warn / success panels and the interactive
+   * `decision` variant: a question with 2-6 options (+ optional "other" text)
+   * whose pick and comment persist per viewer via ctx.saveState. When the
+   * block has its notes box, picking Other MERGES into it — the box becomes
+   * the Other explanation ("Say what instead") and its text is saved to both
+   * state.other and state.comment; without the box (allowComment: false)
+   * Other keeps a dedicated "Say which" input.
+   *
+   * SAVING IS AUTOMATIC, AND WHAT SAVES IS A DRAFT (mos-4dkv9 + the
+   * desk-convergence-ste D2 steer, Joe: "remove the Save answer button, just
+   * save it on press" — answers are DRAFTS until the page's Finish review
+   * sends them): picking an option calls ctx.saveState at once — no button,
+   * and switching options re-saves the new pick the same way. The note (and
+   * the Other explanation, which saves like a note) autosaves ~800ms after
+   * typing stops and on blur; a pending note save is flushed into the next
+   * pick save so one write always carries the whole answer. Everything is
+   * server-persisted per viewer, so a reload brings the draft back. The card
+   * shows a small state line — Saving… / Draft saved · <time> / the error
+   * with a Retry control — never a Save/Update button. A failed save keeps
+   * the viewer's local pick (nothing is lost); the renderer's per-block
+   * strip and backoff also keep retrying (mos-yntqm, mos-lwbbt), and the
+   * server refuses an EMPTY blocks payload so a nothing-write can never wipe
+   * saved verdicts.
+   *
+   * Tones (campaign-blocks Gate A, J4) are QUIET panels: a 10% tone tint, a
+   * 30% tone border, base-content text, and the tone carried by a small solid
+   * icon disc (solid tone fills clear contrast in every theme; a tone-coloured
+   * glyph on a tint does not). No saturated DaisyUI alert slab, no shadow.
+   *
+   * Read-only surfaces (public share, print, tests without saveState) render
+   * the decision as an ANSWER, not a disabled form: the saved pick at full
+   * strength with a check, the other options as plain muted text.
+   *
+   * A SAVED answer looks DONE (mos-tjwof), with the same card-level treatment
+   * the diff-review verdicts get: the card border turns success (with the
+   * ring) and a labeled "Draft: <choice>" chip sits beside the question —
+   * scannable while scrolling, not a tiny check line, and honest about the
+   * draft-until-Finish semantics (D2). While a save is in flight or has
+   * failed the card flips to a warning border — the only remaining "unsaved"
+   * state; typing alone (inside the autosave debounce) does not flag the
+   * card.
+   */
+  import BlockIcon from "../../review/BlockIcon.svelte"
+  import type { BlockProps } from "../../types.js"
+  import { renderBlockMarkdown } from "../markdown/render.js"
+  import NoteComposer from "../../NoteComposer.svelte"
+  import {
+    readNoteAttachments,
+    type NoteAttachment,
+  } from "../../review/attachments.js"
+  import { OTHER_ID, type CalloutParams, type CalloutState } from "./schema.js"
+  import SectionTools from "../../SectionTools.svelte"
+
+  let { params, ctx }: BlockProps<CalloutParams> = $props()
+
+  const variant = $derived(params?.variant ?? "note")
+  /** PARAMS-SPEC rule 4: with `sections`, the body is their flattened
+   * fallback for renderers that ignore them — render one, never both. */
+  const sections = $derived(
+    variant === "decision" ? (params?.sections ?? []) : [],
+  )
+  const bodyHtml = $derived(
+    sections.length > 0 ? "" : renderBlockMarkdown(params?.body),
+  )
+  const sectionHtml = $derived(
+    sections.map((sec) => renderBlockMarkdown(sec.markdown)),
+  )
+  const meta = $derived(variant === "decision" ? (params?.meta ?? []) : [])
+  const primaryAction = $derived(
+    variant === "decision" ? params?.primaryAction : undefined,
+  )
+  const origin = typeof location !== "undefined" ? location.origin : undefined
+  /** Off-origin http(s) links open in a new tab; root-relative stay. */
+  function offOrigin(href: string): boolean {
+    if (!/^https?:\/\//i.test(href)) return false
+    try {
+      return !origin || new URL(href).origin !== origin
+    } catch {
+      return true
+    }
+  }
+  /** Static tone classes for a meta chip (never `text-${tone}`). */
+  const META_TONE: Record<string, string> = {
+    neutral: "text-base-content/75",
+    info: "text-info",
+    success: "text-success",
+    warning: "text-warning",
+    error: "text-error",
+  }
+
+  /** The container's name for its Listen control (mos-8vdg9): the title,
+   * else the decision's question, else a quiet generic. */
+  const listenLabel = $derived(
+    params?.title?.trim() || params?.question?.trim() || "this note",
+  )
+
+  /**
+   * Interactive = the viewer can answer here. On the public share route the
+   * context is `readonly` (and typically has no saveState) — no viewer chrome.
+   */
+  const interactive = $derived(Boolean(ctx?.saveState) && !ctx?.readonly)
+
+  /** "" = no pick yet; real picks are option ids or OTHER_ID. */
+  let pick = $state("")
+  let otherText = $state("")
+  let comment = $state("")
+  /** The note's uploaded attachments (mos-rccb5) — descriptors in the
+   * artifact's private asset store, uploaded as they are captured. */
+  let commentClips = $state<NoteAttachment[]>([])
+  /** Save flights in flight — the small "Saving…" state, not a button. */
+  let flights = $state(0)
+  const saving = $derived(flights > 0)
+  let saveError = $state<string | null>(null)
+  /** The last answer known to be saved (seeded from ctx.state). */
+  let lastSaved = $state<CalloutState | null>(null)
+  /** Focus the "other" field only when the viewer just picked Other. */
+  let focusOther = $state(false)
+  /** The notes box wrapper, for the merged Other focus (via the effect):
+   * the composer is the host's (NoteComposer), so its text entry is found
+   * inside rather than bound. */
+  let composerWrap = $state<HTMLElement | null>(null)
+  /** The "Say which" input element, for the no-notes/legacy Other focus. */
+  let otherInputEl = $state<HTMLInputElement | null>(null)
+  /** The block has a comment/notes box (allowComment: false removes it). */
+  const hasNotes = $derived(params?.allowComment !== false)
+  /**
+   * A previously saved state with a DISTINCT other + comment keeps the old
+   * two-field UI: merging it into one box would silently drop one of the two
+   * texts on the viewer's next save.
+   */
+  let legacySplit = $state(false)
+
+  // Seed the form from this viewer's saved state (mount-time read; state is
+  // keyed per artifact version and does not change while mounted).
+  {
+    const s = (ctx?.state ?? null) as CalloutState | null
+    const other0 = s && typeof s.other === "string" ? s.other : ""
+    const comment0 = s && typeof s.comment === "string" ? s.comment : ""
+    const clips0 = s ? (readNoteAttachments(s.attachments) ?? []) : []
+    if (s && typeof s.pick === "string" && s.pick) pick = s.pick
+    if (other0) otherText = other0
+    if (comment0) comment = comment0
+    if (clips0.length) commentClips = clips0
+    if (s && (s.pick || other0.trim() || comment0.trim() || clips0.length))
+      lastSaved = { ...s }
+    if (
+      s &&
+      s.pick === OTHER_ID &&
+      other0.trim() &&
+      comment0.trim() &&
+      other0.trim() !== comment0.trim()
+    ) {
+      legacySplit = true
+    } else if (s && s.pick === OTHER_ID && !comment0.trim() && other0.trim()) {
+      // The notes box doubles as the Other explanation: show the saved
+      // explanation in it so the returning viewer sees (and can edit) it.
+      comment = other0
+    }
+  }
+
+  /**
+   * The notes box IS the Other explanation: the block has a notes field,
+   * Other is picked, and the saved state is not a legacy two-text split. The
+   * separate "Say which" input only renders when there is no notes field —
+   * or while a legacy split state is on screen.
+   */
+  const notesAsOther = $derived(hasNotes && pick === OTHER_ID && !legacySplit)
+
+  /** The dedicated "Say which" input: only when there is no notes box to
+   * merge into, or while a legacy two-text state keeps both fields. */
+  const showOtherInput = $derived(
+    interactive &&
+      params?.allowOther === true &&
+      pick === OTHER_ID &&
+      !notesAsOther,
+  )
+
+  /** The rendered option list — the authored options plus Other last. */
+  const optionsWithOther = $derived.by(() => {
+    const opts = [...(params?.options ?? [])]
+    if (params?.allowOther === true) {
+      opts.push({ id: OTHER_ID, label: "Other" })
+    }
+    return opts
+  })
+
+  // Keyboard: focus moves to the explanation field when the viewer picks
+  // Other with a POINTER — the merged notes box, or the "Say which" input
+  // when the block has no notes field (or a legacy two-text state keeps both
+  // fields). A keyboard pick (arrows/space/enter) keeps focus on the radios
+  // so arrow roving keeps working. Focus lives in an effect rather than a
+  // `use:` action: an action defers the element's value binding past the
+  // mount flush.
+  $effect(() => {
+    if (focusOther && notesAsOther) {
+      queueMicrotask(() =>
+        composerWrap?.querySelector<HTMLElement>("textarea, [contenteditable='true']")?.focus(),
+      )
+    } else if (focusOther && showOtherInput) {
+      queueMicrotask(() => otherInputEl?.focus())
+    }
+  })
+
+  /**
+   * The one autosave debounce for typed text (the note, and the Other
+   * explanation, which saves like a note): ~800ms after typing stops, and
+   * immediately on blur. A pick save cancels the pending timer and carries
+   * the typed text along, so one write always holds the whole answer.
+   */
+  const NOTE_DEBOUNCE_MS = 800
+  let noteTimer: ReturnType<typeof setTimeout> | null = null
+  function scheduleNoteSave() {
+    if (noteTimer) clearTimeout(noteTimer)
+    noteTimer = setTimeout(() => {
+      noteTimer = null
+      save()
+    }, NOTE_DEBOUNCE_MS)
+  }
+  function cancelNoteSave() {
+    if (noteTimer) {
+      clearTimeout(noteTimer)
+      noteTimer = null
+    }
+  }
+  function flushNoteSave() {
+    if (!noteTimer) return
+    cancelNoteSave()
+    save()
+  }
+  // A save still inside the debounce window when the block goes away is a
+  // real viewer decision — fire it (the renderer's keepalive POST survives
+  // an SPA navigation, same contract as its own unmount flush).
+  $effect(() => () => flushNoteSave())
+
+  /**
+   * The state this form would save right now — null when there is nothing
+   * to write. Never an empty tombstone: the server keeps whatever stands
+   * when a save carries no answer (mos-lwbbt's empty-payload guard), and a
+   * component that posts nothing at all is even better.
+   */
+  function buildState(): CalloutState | null {
+    if (pick) {
+      const next: CalloutState = { pick, at: new Date().toISOString() }
+      if (pick === OTHER_ID) {
+        if (notesAsOther) {
+          // Merged (mos-ucmup): the notes box is the Other explanation. Write
+          // the text to BOTH state.other and state.comment so readers of
+          // either (feedback pull-verdicts, digest summaries, the Pilot drain)
+          // keep working.
+          const t = comment.trim()
+          if (t) {
+            next.other = t
+            next.comment = t
+          }
+        } else {
+          if (otherText.trim()) next.other = otherText.trim()
+          if (comment.trim()) next.comment = comment.trim()
+        }
+      } else if (comment.trim()) {
+        next.comment = comment.trim()
+      }
+      if (commentClips.length) next.attachments = commentClips
+      return next
+    }
+    // No pick yet: a typed note (or an attachment alone) is still worth
+    // keeping, but an answer with neither is nothing.
+    const t = comment.trim()
+    if (!t && commentClips.length === 0) return null
+    const next: CalloutState = { at: new Date().toISOString() }
+    if (t) next.comment = t
+    if (commentClips.length) next.attachments = commentClips
+    return next
+  }
+
+  /** Same answer content (at is bookkeeping, not content). */
+  function sameAnswer(a: CalloutState | null, b: CalloutState | null): boolean {
+    if (a === b) return true
+    if (!a || !b) return false
+    return (
+      (a.pick ?? "") === (b.pick ?? "") &&
+      (a.other ?? "") === (b.other ?? "") &&
+      (a.comment ?? "") === (b.comment ?? "") &&
+      JSON.stringify(a.attachments ?? []) ===
+        JSON.stringify(b.attachments ?? [])
+    )
+  }
+
+  /** Latest save wins for lastSaved: an older flight resolving after a newer
+   * one must not roll the card's saved state back. */
+  let saveSeq = 0
+
+  function save() {
+    if (!interactive || !ctx?.saveState) return
+    const next = buildState()
+    if (!next || sameAnswer(next, lastSaved)) return
+    const mine = ++saveSeq
+    flights++
+    saveError = null
+    ctx
+      .saveState(next)
+      .then(() => {
+        flights--
+        if (mine === saveSeq) lastSaved = next
+      })
+      .catch((e: unknown) => {
+        flights--
+        // The local pick stays (nothing is lost); the card shows the error
+        // + Retry, and the renderer's strip/backoff retries underneath.
+        if (mine === saveSeq) {
+          saveError = e instanceof Error ? e.message : "Saving failed"
+        }
+      })
+  }
+
+  /** The failure state's own control — the only button left on the card
+   * (mos-4dkv9): re-send the current form state. A bare handler reference,
+   * not an inline arrow calling save(): the route-quality Save-action
+   * heuristic pattern-matches an inline arrow that CALLS save in markup as
+   * an unsaved-form Save button, and this card has none — autosave IS the
+   * dirty-form guard (pending edits flush on unmount, so navigation loses
+   * nothing). */
+  function retrySave() {
+    save()
+  }
+
+  /** Select an option — the save happens here, on press (mos-4dkv9). */
+  function pickOption(id: string, focusExplanation: boolean) {
+    if (!interactive) return
+    focusOther = focusExplanation && id === OTHER_ID
+    if (pick === id) return
+    pick = id
+    // The pick save carries whatever typed text is on the card along —
+    // no separate note save needs to chase it.
+    cancelNoteSave()
+    save()
+  }
+
+  /** Radios inside the keydown's own fieldset, in option order (the
+   * interactive ones — read-only renders disabled twins that must not join
+   * the roving). Scoped from the EVENT TARGET, not a bind:this ref: a key
+   * press that lands before Svelte's first post-mount flush (tests, and a
+   * hostile scheduler) must still rove, and bind:this lands only in that
+   * flush. */
+  function radioEls(from: EventTarget | null): HTMLInputElement[] {
+    const scope = (from as HTMLElement | null)?.closest("fieldset")
+    if (!scope) return []
+    return Array.from(
+      scope.querySelectorAll<HTMLInputElement>(
+        'input[type="radio"]:not(:disabled)',
+      ),
+    )
+  }
+
+  /**
+   * Keyboard on the option group: arrow keys move the selection (wrapping),
+   * space or enter picks — and every pick saves. preventDefault keeps the
+   * browser's own radio roving from double-firing behind us.
+   */
+  function optionKeydown(e: KeyboardEvent, index: number) {
+    const count = optionsWithOther.length
+    if (count === 0) return
+    let next: number
+    if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+      next = (index + 1) % count
+    } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+      next = (index - 1 + count) % count
+    } else if (e.key === " " || e.key === "Enter") {
+      next = index
+    } else {
+      return
+    }
+    e.preventDefault()
+    radioEls(e.target)[next]?.focus()
+    pickOption(optionsWithOther[next]!.id, false)
+  }
+
+  const TONE = {
+    note: {
+      panel: "border-info/30 bg-info/10",
+      disc: "bg-info text-info-content",
+    },
+    warn: {
+      panel: "border-warning/40 bg-warning/10",
+      disc: "bg-warning text-warning-content",
+    },
+    success: {
+      panel: "border-success/35 bg-success/10",
+      disc: "bg-success text-success-content",
+    },
+  } as const
+  const tone = $derived(
+    TONE[variant === "warn" || variant === "success" ? variant : "note"],
+  )
+
+  function optionLabel(id: string): string {
+    if (id === OTHER_ID) return lastSaved?.other?.trim() || "Other"
+    return params?.options?.find((o) => o.id === id)?.label ?? id
+  }
+
+  const whenFmt = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  })
+  function when(iso: string | undefined): string {
+    if (!iso) return ""
+    const d = new Date(iso)
+    return Number.isFinite(d.getTime()) ? whenFmt.format(d) : ""
+  }
+
+  /**
+   * The card's state: a save in flight or failed flags the card (the only
+   * remaining "unsaved" look); a saved pick is DONE; otherwise fresh.
+   */
+  const cardBorder = $derived.by(() => {
+    if (saving || saveError) return "border-warning/60"
+    if (lastSaved?.pick) return "border-success ring-1 ring-success/40"
+    return "border-primary/25"
+  })
+
+  /** The small state line under the options — no button beside it. A saved
+   * answer is a DRAFT until the page's Finish review sends it (D2). */
+  const savedLine = $derived.by(() => {
+    if (saveError) return saveError
+    if (saving) return "Saving…"
+    if (lastSaved) {
+      const at = when(lastSaved.at)
+      return `Draft saved${at ? ` · ${at}` : ""}`
+    }
+    return ""
+  })
+
+  const PROSE =
+    "prose prose-sm max-w-none text-base-content prose-p:max-w-[65ch] prose-li:max-w-[65ch] prose-p:my-1.5 prose-ul:my-1.5 prose-ol:my-1.5 prose-code:rounded-field prose-code:bg-base-content/10 prose-code:px-1 prose-code:py-0.5 prose-code:font-normal prose-code:before:content-none prose-code:after:content-none"
+
+  const optionRow =
+    "flex min-w-0 items-center gap-2.5 rounded-field border px-3 py-2 text-sm"
+
+  /** A contract card's recommended option (mos-4tgfj): its letter, else its
+   * position, matches `params.recommended`. */
+  function isRecommended(i: number): boolean {
+    const rec = params?.recommended
+    if (!rec) return false
+    const o = params?.options?.[i]
+    return Boolean(o) && (o!.letter ?? String.fromCharCode(65 + i)) === rec
+  }
+</script>
+
+{#snippet optionText(
+  o: { id: string; label: string; detail?: string },
+  i: number,
+  text: string,
+)}
+  <span class="min-w-0">
+    <span>{text}</span>
+    {#if isRecommended(i)}
+      <span class="badge badge-ghost badge-sm ms-1.5 align-middle"
+        >Recommended</span
+      >
+    {/if}
+    {#if o.detail}
+      <span class="block text-xs text-base-content/60">{o.detail}</span>
+    {/if}
+  </span>
+{/snippet}
+
+{#if variant === "decision"}
+  {@const readPick = lastSaved?.pick ?? ""}
+  <div
+    class="rounded-box border bg-base-100 p-4 sm:p-5 {cardBorder}"
+    data-variant="decision"
+    data-answered={readPick ? "true" : "false"}
+    data-saving={saving ? "true" : "false"}
+    data-failed={saveError ? "true" : "false"}
+  >
+    <div class="flex items-start gap-3">
+      <span
+        class="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full bg-primary text-primary-content"
+        aria-hidden="true"
+      >
+        <BlockIcon name="circle-help" size={15} stroke-width={2.25} />
+      </span>
+      <div class="min-w-0 flex-1">
+        <SectionTools {ctx} {listenLabel} />
+        {#if params?.title}
+          <p class="text-sm font-medium text-base-content/70">
+            {params.title}
+          </p>
+        {/if}
+        {#if bodyHtml}
+          <div class="{PROSE} mt-1">
+            {@html bodyHtml}
+          </div>
+        {/if}
+
+        <div class="mt-3">
+          <fieldset class="min-w-0">
+            <legend
+              class="flex flex-wrap items-center gap-2 text-base leading-snug font-semibold text-base-content"
+            >
+              <span>{params?.question}</span>
+              {#if interactive && saving}
+                <span
+                  class="badge badge-sm font-medium badge-warning"
+                  data-saving-chip
+                >
+                  Saving…
+                </span>
+              {:else if interactive && saveError}
+                <span
+                  class="badge badge-sm font-medium badge-error"
+                  data-failed-chip
+                >
+                  Not saved
+                </span>
+              {:else if interactive && lastSaved?.pick}
+                <span
+                  class="badge badge-sm font-medium badge-success"
+                  data-answer-chip
+                >
+                  Draft: {optionLabel(lastSaved.pick)}
+                </span>
+              {/if}
+            </legend>
+
+            {#if meta.length > 0}
+              <ul
+                class="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-base-content/70"
+                aria-label="Details"
+                data-decision-meta
+              >
+                {#each meta as m, mi (mi)}
+                  <li class="inline-flex min-w-0 items-baseline gap-1" title={m.title}>
+                    <span class="text-base-content/55">{m.label}</span>
+                    {#if m.href}
+                      {@const ext = offOrigin(m.href)}
+                      <a
+                        class="link link-hover min-w-0 truncate font-medium {META_TONE[m.tone ?? 'neutral']}"
+                        href={m.href}
+                        target={ext ? "_blank" : undefined}
+                        rel={ext ? "noopener noreferrer" : undefined}
+                        >{m.value}{#if ext}<span class="sr-only"> (opens in a new tab)</span>{/if}</a
+                      >
+                    {:else}
+                      <span class="min-w-0 truncate font-medium {META_TONE[m.tone ?? 'neutral']}"
+                        >{m.value}</span
+                      >
+                    {/if}
+                  </li>
+                {/each}
+              </ul>
+            {/if}
+
+            {#if primaryAction}
+              {@const ext = offOrigin(primaryAction.url)}
+              <div class="mt-3">
+                <a
+                  class="btn btn-primary btn-sm rounded-field"
+                  href={primaryAction.url}
+                  target={ext ? "_blank" : undefined}
+                  rel={ext ? "noopener noreferrer" : undefined}
+                  data-primary-action
+                >
+                  {primaryAction.label}
+                  {#if ext}
+                    <BlockIcon name="external-link" size={14} />
+                    <span class="sr-only"> (opens in a new tab)</span>
+                  {/if}
+                </a>
+              </div>
+            {/if}
+
+            {#if !interactive && readPick}
+              <p class="mt-1 text-sm text-base-content/75">
+                Answered: <strong class="font-semibold text-base-content"
+                  >{optionLabel(readPick)}</strong
+                >{#if when(lastSaved?.at)}<span
+                    >{" · "}{when(lastSaved?.at)}</span
+                  >{/if}
+              </p>
+            {/if}
+
+            <div class="mt-2.5 flex flex-col gap-1.5">
+              {#each optionsWithOther as o, i (o.id)}
+                {#if interactive}
+                  <label
+                    class="{optionRow} cursor-pointer border-base-content/15 transition-colors hover:bg-base-content/5 has-[:checked]:border-primary has-[:checked]:bg-primary/8 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary motion-reduce:transition-none"
+                  >
+                    <input
+                      type="radio"
+                      class="radio radio-primary radio-sm"
+                      name="callout-{ctx?.blockId ?? 'decision'}"
+                      value={o.id}
+                      checked={pick === o.id}
+                      onchange={() => pickOption(o.id, true)}
+                      onkeydown={(e) => optionKeydown(e, i)}
+                    />
+                    {@render optionText(o, i, o.label)}
+                  </label>
+                {:else}
+                  {@const chosen = readPick === o.id}
+                  <label
+                    class="{optionRow} {chosen
+                      ? 'border-primary bg-primary/8 font-medium text-base-content'
+                      : 'border-base-content/10 text-base-content/70'}"
+                  >
+                    <input
+                      type="radio"
+                      class="sr-only"
+                      name="callout-{ctx?.blockId ?? 'decision'}"
+                      value={o.id}
+                      checked={chosen}
+                      disabled
+                    />
+                    <span
+                      class="shrink-0 {chosen
+                        ? 'text-primary'
+                        : 'text-base-content/40'}"
+                      aria-hidden="true"
+                    >
+                      {#if chosen}
+                        <BlockIcon name="circle-check" size={18} stroke-width={2.25} />
+                      {:else}
+                        <BlockIcon name="circle" size={18} stroke-width={1.75} />
+                      {/if}
+                    </span>
+                    {@render optionText(
+                      o,
+                      i,
+                      o.id === OTHER_ID && chosen
+                        ? optionLabel(OTHER_ID)
+                        : o.label,
+                    )}
+                    {#if chosen}<span class="sr-only">(the saved answer)</span
+                      >{/if}
+                  </label>
+                {/if}
+              {/each}
+
+              {#if showOtherInput}
+                <input
+                  type="text"
+                  class="input input-bordered input-sm w-full"
+                  placeholder="Say which"
+                  aria-label="Other: please specify"
+                  bind:value={otherText}
+                  bind:this={otherInputEl}
+                  oninput={scheduleNoteSave}
+                  onblur={flushNoteSave}
+                />
+              {/if}
+            </div>
+          </fieldset>
+
+          {#if interactive && hasNotes}
+            <div class="mt-4 block" bind:this={composerWrap}>
+              <span class="text-sm text-base-content/75">
+                {notesAsOther
+                  ? "Say what instead"
+                  : (params?.commentLabel ?? "Add a note (optional)")}
+              </span>
+              <!-- The ONE composer (mos-rccb5): the notes box gains voice /
+                   video / screen capture, file picker, paste and drag-drop;
+                   the debounced autosave and its blur-flush are unchanged. -->
+              <NoteComposer
+                class="mt-1"
+                artifactId={ctx.artifactId}
+                bind:text={comment}
+                bind:clips={commentClips}
+                onInput={() => scheduleNoteSave()}
+                onClipsChange={() => scheduleNoteSave()}
+                onBlur={flushNoteSave}
+                rows={2}
+                placeholder={notesAsOther
+                  ? "Say what instead"
+                  : "Anything to add?"}
+                label={notesAsOther
+                  ? "Say what instead"
+                  : (params?.commentLabel ?? "Add a note (optional)")}
+              />
+            </div>
+          {:else if !interactive && lastSaved?.comment && !(readPick === OTHER_ID && lastSaved.comment === lastSaved.other)}
+            <p class="mt-3 text-sm text-base-content/75">
+              Note: {lastSaved.comment}
+            </p>
+          {/if}
+
+          {#if sections.length > 0}
+            <div class="mt-4 flex flex-col gap-1.5" data-decision-sections>
+              {#each sections as sec, si (si)}
+                <details
+                  class="group rounded-field border border-base-content/10"
+                  open={sec.open === true}
+                >
+                  <summary
+                    class="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-sm font-medium text-base-content [&::-webkit-details-marker]:hidden"
+                  >
+                    <span
+                      class="text-base-content/50 transition-transform group-open:rotate-90 motion-reduce:transition-none"
+                      aria-hidden="true">›</span
+                    >
+                    {sec.heading}
+                  </summary>
+                  <div class="{PROSE} px-3 pb-3">
+                    {@html sectionHtml[si]}
+                  </div>
+                </details>
+              {/each}
+            </div>
+          {/if}
+
+          {#if interactive}
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              <p
+                aria-live="polite"
+                data-save-status
+                class="flex min-w-0 items-center gap-1 text-xs {saveError
+                  ? 'text-error'
+                  : 'text-base-content/70'}"
+              >
+                {#if !saveError && !saving && lastSaved}<BlockIcon name="check"
+                    size={13}
+                    stroke-width={2.5}
+                    class="text-success"
+                    aria-hidden="true"
+                  />{/if}{savedLine}
+              </p>
+              {#if saveError}
+                <!-- No Save/Update answer button any more — the only control
+                     left is the failure state's own Retry (mos-4dkv9). -->
+                <button
+                  type="button"
+                  class="btn btn-xs rounded-field"
+                  data-retry
+                  onclick={retrySave}
+                >
+                  Retry
+                </button>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{:else}
+  <div
+    class="flex items-start gap-3 rounded-box border p-4 text-base-content {tone.panel}"
+    role="note"
+    data-variant={variant}
+  >
+    <span
+      class="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full {tone.disc}"
+      aria-hidden="true"
+    >
+      {#if variant === "warn"}
+        <BlockIcon name="triangle-alert" size={14} stroke-width={2.5} />
+      {:else if variant === "success"}
+        <BlockIcon name="check" size={14} stroke-width={2.75} />
+      {:else}
+        <BlockIcon name="info" size={14} stroke-width={2.5} />
+      {/if}
+    </span>
+    <div class="min-w-0 flex-1">
+      <SectionTools {ctx} {listenLabel} />
+      {#if params?.title}
+        <p class="font-semibold leading-snug">{params.title}</p>
+      {/if}
+      {#if bodyHtml}
+        <div class="{PROSE} {params?.title ? 'mt-0.5' : ''}">
+          {@html bodyHtml}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}