@marktiderman/genesis-forms-web 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,17 +1,19 @@
 "use client";
-import { createContext, useRef, useContext, useState, useEffect, useLayoutEffect, useId } from 'react';
+import { createContext, useRef, useState, useId, useEffect, useContext, useLayoutEffect } from 'react';
 import { Button } from '@marktiderman/genesis-ui/button';
 import { Progress } from '@marktiderman/genesis-ui/progress';
 import { cn } from '@marktiderman/genesis-ui/utils';
 import { createRendererRegistry, useForm, FormRuntime, useFormContext, useFormSelector, FieldRenderer } from '@marktiderman/genesis-forms-react';
 import { Checkbox } from '@marktiderman/genesis-ui/checkbox';
-import { FormDescription, FormError, FormLabel } from '@marktiderman/genesis-ui/form-field';
 import { Input } from '@marktiderman/genesis-ui/input';
 import { Label } from '@marktiderman/genesis-ui/label';
 import { RadioGroup, RadioGroupItem } from '@marktiderman/genesis-ui/radio-group';
 import { Textarea } from '@marktiderman/genesis-ui/textarea';
-import { choiceOptions, getFieldType } from '@marktiderman/genesis-forms';
+import { choiceOptions, listLimits, tableColumns, tableLimits, parseTimestamp, formatTimestamp, getFieldType } from '@marktiderman/genesis-forms';
+import { FormDescription, FormError, FormLabel } from '@marktiderman/genesis-ui/form-field';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Stack } from '@marktiderman/genesis-ui/layout';
+import { SortableList } from '@marktiderman/genesis-ui/sortable-list';
 
 // src/Form.tsx
 var FormPresentationContext = createContext({ presentation: "embedded", layout: "classic" });
@@ -118,6 +120,635 @@ function describedBy(props) {
   ].filter(Boolean);
   return ids.length ? ids.join(" ") : void 0;
 }
+var MediaTimeContext = createContext(null);
+function useMediaTime() {
+  return useContext(MediaTimeContext);
+}
+var SourceTextContext = createContext(null);
+function useSourceText() {
+  return useContext(SourceTextContext);
+}
+function PlusIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+}
+function XIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+}
+function move(list, from, to) {
+  const next = list.slice();
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  return next;
+}
+function useEntryKeys(count) {
+  const keys = useRef([]);
+  const next = useRef(0);
+  const make = () => `e${next.current++}`;
+  while (keys.current.length < count) keys.current.push(make());
+  if (keys.current.length > count) keys.current = keys.current.slice(0, count);
+  return {
+    keys: keys.current,
+    /** Add a key at `at` and return it. */
+    insert(at) {
+      const key = make();
+      keys.current = [...keys.current.slice(0, at), key, ...keys.current.slice(at)];
+      return key;
+    },
+    remove(at) {
+      keys.current = keys.current.filter((_, i) => i !== at);
+    },
+    move(from, to) {
+      keys.current = move(keys.current, from, to);
+    }
+  };
+}
+function useFocusLater() {
+  const elements = useRef(/* @__PURE__ */ new Map());
+  const [target, setTarget] = useState(null);
+  useEffect(() => {
+    if (target === null) return;
+    elements.current.get(target)?.focus();
+    setTarget(null);
+  }, [target]);
+  return {
+    ref: (key) => (el) => {
+      if (el) elements.current.set(key, el);
+      else elements.current.delete(key);
+    },
+    focus: setTarget
+  };
+}
+var invalid = (props) => props.binding.error ? true : void 0;
+function RemoveButton({ label, onClick, disabled }) {
+  return /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": label, disabled, onClick, className: "shrink-0", children: /* @__PURE__ */ jsx(XIcon, {}) });
+}
+function AddButton({ children, onClick, disabled }) {
+  return /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled, onClick, className: "self-start", children: [
+    /* @__PURE__ */ jsx(PlusIcon, {}),
+    " ",
+    children
+  ] });
+}
+function excerpt(text, max = 40) {
+  const t = text.replace(/\s+/g, " ").trim();
+  return t.length > max ? `${t.slice(0, max - 1)}\u2026` : t;
+}
+function ListField(props) {
+  const { binding, inputId } = props;
+  const field = binding.field;
+  const { max, itemMaxLength } = listLimits(field);
+  const stored = Array.isArray(binding.value) ? binding.value.map((v) => typeof v === "string" ? v : "") : [];
+  const items = stored.length ? stored : [""];
+  const entries = useEntryKeys(items.length);
+  const focusLater = useFocusLater();
+  const addRef = useRef(null);
+  const placeholder = typeof field.props?.placeholder === "string" ? field.props.placeholder : field.placeholder ?? void 0;
+  const save = (next) => binding.setValue(next.length ? next : void 0);
+  const add = () => {
+    if (items.length >= max) return;
+    const key = entries.insert(items.length);
+    save([...items, ""]);
+    focusLater.focus(key);
+  };
+  const remove = (i) => {
+    entries.remove(i);
+    const next = items.filter((_, j) => j !== i);
+    save(next);
+    const neighbour = entries.keys[Math.min(i, next.length - 1)];
+    if (neighbour !== void 0 && next.length) focusLater.focus(neighbour);
+    else addRef.current?.focus();
+  };
+  const onKeyDown = (i) => (e) => {
+    if (e.key !== "Enter" || e.nativeEvent.isComposing || e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) return;
+    if (i < items.length - 1) {
+      e.preventDefault();
+      focusLater.focus(entries.keys[i + 1]);
+    } else if (items.length < max) {
+      e.preventDefault();
+      add();
+    }
+  };
+  const rows = items.map((text, index) => ({ key: entries.keys[index], text, index }));
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(
+      SortableList,
+      {
+        items: rows,
+        getKey: (r) => r.key,
+        getItemLabel: (r) => r.text.trim() ? excerpt(r.text, 30) : `Item ${r.index + 1}`,
+        label: `${binding.label}: items`,
+        disabled: items.length < 2,
+        onReorder: (from, to) => {
+          entries.move(from, to);
+          save(move(items, from, to));
+        },
+        renderItem: (r, { handle, index }) => /* @__PURE__ */ jsxs(Stack, { direction: "row", align: "center", gap: "sm", className: "w-full min-w-0", children: [
+          handle,
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: focusLater.ref(r.key),
+              id: index === 0 ? `${inputId}-0` : void 0,
+              "data-gf-focus": index === 0 ? "" : void 0,
+              "aria-label": `Item ${index + 1}`,
+              "aria-invalid": invalid(props),
+              maxLength: itemMaxLength,
+              placeholder,
+              value: r.text,
+              onChange: (e) => save(items.map((t, j) => j === index ? e.target.value : t)),
+              onKeyDown: onKeyDown(index)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RemoveButton,
+            {
+              label: `Remove item ${index + 1}`,
+              disabled: items.length === 1 && r.text === "",
+              onClick: () => remove(index)
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: addRef,
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "self-start",
+        disabled: items.length >= max,
+        onClick: add,
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, {}),
+          " Add item"
+        ]
+      }
+    )
+  ] }) });
+}
+function toRow(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+  return Object.fromEntries(Object.entries(value).filter((e) => typeof e[1] === "string"));
+}
+function TableField(props) {
+  const { binding, inputId } = props;
+  const columns = tableColumns(binding.field);
+  const { minRows, maxRows } = tableLimits(binding.field);
+  const stored = Array.isArray(binding.value) ? binding.value.map(toRow) : [];
+  const shown = Math.min(Math.max(stored.length, minRows, 1), Math.max(maxRows, 1));
+  const rows = Array.from({ length: shown }, (_, i) => stored[i] ?? {});
+  const entries = useEntryKeys(rows.length);
+  const focusLater = useFocusLater();
+  const addRef = useRef(null);
+  const save = (next) => binding.setValue(next.length ? next : void 0);
+  const firstKey = columns[0]?.key;
+  const add = () => {
+    if (rows.length >= maxRows) return;
+    const key = entries.insert(rows.length);
+    save([...rows, {}]);
+    focusLater.focus(key);
+  };
+  const remove = (i) => {
+    entries.remove(i);
+    const next = rows.filter((_, j) => j !== i);
+    save(next);
+    const neighbour = entries.keys[Math.min(i, next.length - 1)];
+    if (neighbour !== void 0 && next.length) focusLater.focus(neighbour);
+    else addRef.current?.focus();
+  };
+  if (!columns.length) {
+    return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This question has no columns yet." }) });
+  }
+  const items = rows.map((row, index) => ({ key: entries.keys[index], row, index }));
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx(
+      SortableList,
+      {
+        items,
+        getKey: (r) => r.key,
+        getItemLabel: (r) => `Row ${r.index + 1}`,
+        label: `${binding.label}: rows`,
+        disabled: rows.length < 2,
+        onReorder: (from, to) => {
+          entries.move(from, to);
+          save(move(rows, from, to));
+        },
+        renderItem: (r, { handle, index }) => /* @__PURE__ */ jsxs(Stack, { direction: "row", align: "start", gap: "sm", className: "w-full min-w-0", children: [
+          handle ? /* @__PURE__ */ jsx("div", { className: "pt-7", children: handle }) : null,
+          /* @__PURE__ */ jsxs("fieldset", { className: "m-0 min-w-0 flex-1 rounded-md border border-input p-3", children: [
+            /* @__PURE__ */ jsx("legend", { className: "px-1 text-sm font-medium", children: `Row ${index + 1}` }),
+            /* @__PURE__ */ jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: columns.map((column, c) => {
+              const id = `${inputId}-${r.key}-${column.key}`;
+              const common = {
+                id,
+                // The first cell of the first row is what an error summary link and the focus layout reach.
+                "data-gf-focus": index === 0 && c === 0 ? "" : void 0,
+                "aria-invalid": invalid(props),
+                value: r.row[column.key] ?? "",
+                maxLength: 2e3
+              };
+              const set = (text) => save(rows.map((row, j) => j === index ? { ...row, [column.key]: text } : row));
+              return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", column.long && "sm:col-span-2"), children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: id, children: column.label }),
+                column.long ? /* @__PURE__ */ jsx(
+                  Textarea,
+                  {
+                    ...common,
+                    ref: column.key === firstKey ? focusLater.ref(r.key) : void 0,
+                    rows: 2,
+                    onChange: (e) => set(e.target.value)
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    ...common,
+                    ref: column.key === firstKey ? focusLater.ref(r.key) : void 0,
+                    onChange: (e) => set(e.target.value)
+                  }
+                )
+              ] }, column.key);
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "pt-7", children: /* @__PURE__ */ jsx(
+            RemoveButton,
+            {
+              label: `Remove row ${index + 1}`,
+              disabled: rows.length <= Math.max(minRows, 1),
+              onClick: () => remove(index)
+            }
+          ) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: addRef,
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "self-start",
+        disabled: rows.length >= maxRows,
+        onClick: add,
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, {}),
+          " Add row"
+        ]
+      }
+    )
+  ] }) });
+}
+function toNote(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return { at: 0, text: "" };
+  return { at: typeof value.at === "number" ? value.at : 0, text: typeof value.text === "string" ? value.text : "" };
+}
+function MediaNotesField(props) {
+  const { binding, inputId } = props;
+  const media = useMediaTime();
+  const maxNotes = typeof binding.field.props?.maxNotes === "number" ? binding.field.props.maxNotes : 20;
+  const textMaxLength = typeof binding.field.props?.textMaxLength === "number" ? binding.field.props.textMaxLength : 1e3;
+  const notes = Array.isArray(binding.value) ? binding.value.map(toNote) : [];
+  const entries = useEntryKeys(notes.length);
+  const now = () => {
+    const t = media?.currentTime?.();
+    return typeof t === "number" && Number.isFinite(t) && t >= 0 ? formatTimestamp(t) : "";
+  };
+  const [time, setTime] = useState(now);
+  const [timeTouched, setTimeTouched] = useState(false);
+  const [text, setText] = useState("");
+  const [timeError, setTimeError] = useState(null);
+  const textRef = useRef(null);
+  const save = (next) => binding.setValue(next.length ? next : void 0);
+  const full = notes.length >= maxNotes;
+  const follow = () => {
+    if (timeTouched || !media?.currentTime) return;
+    const t = now();
+    if (t) setTime(t);
+  };
+  const parsed = parseTimestamp(time);
+  const add = () => {
+    if (full || !text.trim()) return;
+    const at = time.trim() === "" && !media?.currentTime ? 0 : parsed;
+    if (at === null) {
+      setTimeError("Enter a time like 1:23 or 1:02:03.");
+      return;
+    }
+    const at_ = notes.findIndex((n) => n.at > at);
+    const index = at_ === -1 ? notes.length : at_;
+    entries.insert(index);
+    save([...notes.slice(0, index), { at, text: text.trim() }, ...notes.slice(index)]);
+    setText("");
+    setTimeError(null);
+    setTimeTouched(false);
+    setTime(now());
+    textRef.current?.focus();
+  };
+  const onEnter = (e) => {
+    if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
+    e.preventDefault();
+    add();
+  };
+  const addLabel = media?.currentTime && parsed !== null ? `Add note at ${formatTimestamp(parsed)}` : "Add note";
+  const timeId = `${inputId}-time`;
+  const textId = `${inputId}-text`;
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+    notes.length ? /* @__PURE__ */ jsx("ol", { "aria-label": `${binding.label}: notes`, className: "m-0 list-none space-y-2 p-0", children: notes.map((note, index) => {
+      const at = formatTimestamp(note.at);
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Stack, { direction: "row", align: "center", gap: "sm", children: [
+        media?.seek ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "link",
+            size: "sm",
+            className: "shrink-0 px-0 tabular-nums",
+            "aria-label": `Play from ${at}`,
+            onClick: () => media.seek?.(note.at),
+            children: at
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm tabular-nums text-muted-foreground", children: at }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": `Note at ${at}`,
+            "aria-invalid": invalid(props),
+            maxLength: textMaxLength,
+            value: note.text,
+            onChange: (e) => save(notes.map((n, j) => j === index ? { ...n, text: e.target.value } : n)),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") e.preventDefault();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RemoveButton,
+          {
+            label: `Remove note at ${at}`,
+            onClick: () => {
+              entries.remove(index);
+              save(notes.filter((_, j) => j !== index));
+              textRef.current?.focus();
+            }
+          }
+        )
+      ] }) }, entries.keys[index]);
+    }) }) : null,
+    full ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: `You've added the most notes this question takes (${maxNotes}).` }) : /* @__PURE__ */ jsxs("div", { className: "grid gap-2 sm:grid-cols-[7rem_1fr_auto] sm:items-end", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: timeId, children: "Time" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: timeId,
+            inputMode: "numeric",
+            placeholder: "m:ss",
+            value: time,
+            "aria-invalid": timeError ? true : void 0,
+            "aria-describedby": timeError ? `${timeId}-error` : void 0,
+            onChange: (e) => {
+              setTime(e.target.value);
+              setTimeTouched(true);
+              setTimeError(null);
+            },
+            onKeyDown: onEnter
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: textId, children: "Note" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: textRef,
+            id: textId,
+            "data-gf-focus": "",
+            maxLength: textMaxLength,
+            value: text,
+            onFocus: follow,
+            onChange: (e) => {
+              if (!text) follow();
+              setText(e.target.value);
+            },
+            onKeyDown: onEnter
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(AddButton, { onClick: add, disabled: !text.trim(), children: addLabel }),
+      timeError ? /* @__PURE__ */ jsx("p", { id: `${timeId}-error`, className: "text-sm text-destructive sm:col-span-3", children: timeError }) : null
+    ] })
+  ] }) });
+}
+function toHighlight(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const { start, end, quote, note } = value;
+  if (typeof start !== "number" || typeof end !== "number" || typeof quote !== "string") return null;
+  return { start, end, quote, note: typeof note === "string" ? note : "" };
+}
+function segments(text, highlights) {
+  const cuts = /* @__PURE__ */ new Set([0, text.length]);
+  for (const h of highlights) {
+    if (h.start >= 0 && h.end <= text.length && h.start < h.end) {
+      cuts.add(h.start);
+      cuts.add(h.end);
+    }
+  }
+  const points = [...cuts].sort((a, b) => a - b);
+  const out = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    const start = points[i];
+    const end = points[i + 1];
+    if (end <= start) continue;
+    out.push({ start, text: text.slice(start, end), marked: highlights.some((h) => h.start <= start && h.end >= end) });
+  }
+  return out;
+}
+function textOffset(root, node, offset) {
+  const range = document.createRange();
+  range.selectNodeContents(root);
+  range.setEnd(node, offset);
+  return range.toString().length;
+}
+function TextHighlightsField(props) {
+  const { binding, inputId } = props;
+  const hosted = useSourceText();
+  const own = typeof binding.field.props?.text === "string" ? binding.field.props.text : "";
+  const text = hosted ?? own;
+  const maxHighlights = typeof binding.field.props?.maxHighlights === "number" ? binding.field.props.maxHighlights : 20;
+  const highlights = (Array.isArray(binding.value) ? binding.value : []).flatMap((v) => {
+    const h = toHighlight(v);
+    return h ? [h] : [];
+  });
+  const entries = useEntryKeys(highlights.length);
+  const textRef = useRef(null);
+  const noteRef = useRef(null);
+  const toggleRef = useRef(null);
+  const [selection, setSelection] = useState(null);
+  const [typing, setTyping] = useState(false);
+  const [passage, setPassage] = useState("");
+  const [note, setNote] = useState("");
+  const full = highlights.length >= maxHighlights;
+  const save = (next) => binding.setValue(next.length ? next : void 0);
+  const hintId = useId();
+  const typed = passage.trim();
+  const found = typing && typed ? text.indexOf(typed) : -1;
+  const draft = typing ? found >= 0 ? { start: found, end: found + typed.length } : null : selection;
+  const draftKey = draft ? `${draft.start}:${draft.end}` : "";
+  const wasSelection = useRef(false);
+  useEffect(() => {
+    if (draftKey && wasSelection.current) noteRef.current?.focus();
+  }, [draftKey]);
+  const readSelection = () => {
+    const root = textRef.current;
+    const sel = typeof window === "undefined" ? null : window.getSelection();
+    if (!root || !sel || sel.rangeCount === 0 || sel.isCollapsed || full) return;
+    const range = sel.getRangeAt(0);
+    if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) return;
+    let start = textOffset(root, range.startContainer, range.startOffset);
+    let end = textOffset(root, range.endContainer, range.endOffset);
+    if (start > end) [start, end] = [end, start];
+    while (start < end && /\s/.test(text[start])) start++;
+    while (end > start && /\s/.test(text[end - 1])) end--;
+    if (end <= start) return;
+    wasSelection.current = true;
+    setTyping(false);
+    setSelection({ start, end });
+  };
+  const reset = () => {
+    setSelection(null);
+    setPassage("");
+    setNote("");
+    setTyping(false);
+    wasSelection.current = false;
+  };
+  const commit = () => {
+    if (!draft || !note.trim() || full) return;
+    const h = { start: draft.start, end: draft.end, quote: text.slice(draft.start, draft.end), note: note.trim() };
+    const at = highlights.findIndex((x) => x.start > h.start);
+    const index = at === -1 ? highlights.length : at;
+    entries.insert(index);
+    save([...highlights.slice(0, index), h, ...highlights.slice(index)]);
+    reset();
+    window.getSelection?.()?.removeAllRanges();
+    toggleRef.current?.focus();
+  };
+  if (!text) {
+    return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "There is no passage to highlight." }) });
+  }
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref: textRef,
+        id: `${inputId}-text`,
+        "aria-describedby": hintId,
+        className: "m-0 whitespace-pre-wrap rounded-md border border-input bg-muted/30 p-3 text-base leading-relaxed",
+        onMouseUp: readSelection,
+        onTouchEnd: readSelection,
+        onKeyUp: readSelection,
+        children: segments(text, highlights).map(
+          (s) => s.marked ? /* @__PURE__ */ jsx("mark", { className: "rounded-sm bg-primary/20 text-foreground", children: s.text }, s.start) : /* @__PURE__ */ jsx("span", { children: s.text }, s.start)
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { id: hintId, className: "m-0 text-sm text-muted-foreground", children: full ? `You've added the most highlights this question takes (${maxHighlights}).` : "Select words in the passage to highlight them, or use Highlight a passage to type them." }),
+    !full ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: toggleRef,
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "self-start",
+        "aria-expanded": typing,
+        onClick: () => {
+          setSelection(null);
+          wasSelection.current = false;
+          setTyping((t) => !t);
+        },
+        children: "Highlight a passage"
+      }
+    ) : null,
+    typing && !full ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: `${inputId}-passage`, children: "Passage" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${inputId}-passage`,
+          value: passage,
+          "aria-describedby": `${inputId}-passage-hint`,
+          "aria-invalid": typed && found < 0 ? true : void 0,
+          onChange: (e) => setPassage(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              if (found >= 0) noteRef.current?.focus();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { id: `${inputId}-passage-hint`, className: "m-0 text-sm text-muted-foreground", children: typed && found < 0 ? "Not found in the passage. Type the words exactly as they appear." : "Type the words exactly as they appear." })
+    ] }) : null,
+    draft && !full ? /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "New highlight", className: "space-y-2 rounded-md border border-input p-3", children: [
+      /* @__PURE__ */ jsx("blockquote", { className: "m-0 border-l-2 border-primary pl-3 text-sm", children: /* @__PURE__ */ jsx("mark", { className: "bg-primary/20 text-foreground", children: text.slice(draft.start, draft.end) }) }),
+      /* @__PURE__ */ jsx(Label, { htmlFor: `${inputId}-note`, children: "Your note" }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ref: noteRef,
+          id: `${inputId}-note`,
+          rows: 2,
+          maxLength: 1e3,
+          value: note,
+          onChange: (e) => setNote(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "sm", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", disabled: !note.trim(), onClick: commit, children: "Highlight" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: reset, children: "Cancel" })
+      ] })
+    ] }) : null,
+    highlights.length ? /* @__PURE__ */ jsx("ol", { "aria-label": `${binding.label}: highlights`, className: "m-0 list-none space-y-3 p-0", children: highlights.map((h, index) => {
+      const name = `\u201C${excerpt(h.quote)}\u201D`;
+      return /* @__PURE__ */ jsxs("li", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("blockquote", { className: "m-0 border-l-2 border-primary pl-3 text-sm", children: h.quote }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", align: "center", gap: "sm", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              "aria-label": `Note on ${name}`,
+              "aria-invalid": invalid(props) || (h.note.trim() ? void 0 : true),
+              maxLength: 1e3,
+              value: h.note,
+              onChange: (e) => save(highlights.map((x, j) => j === index ? { ...x, note: e.target.value } : x)),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") e.preventDefault();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RemoveButton,
+            {
+              label: `Remove highlight ${name}`,
+              onClick: () => {
+                entries.remove(index);
+                save(highlights.filter((_, j) => j !== index));
+                toggleRef.current?.focus();
+              }
+            }
+          )
+        ] })
+      ] }, entries.keys[index]);
+    }) }) : null
+  ] }) });
+}
+var structuredRenderers = [
+  { type: "list", Component: ListField },
+  { type: "table", Component: TableField },
+  { type: "media-notes", Component: MediaNotesField },
+  { type: "text-highlights", Component: TextHighlightsField }
+];
 function groupAria(props) {
   return {
     "aria-labelledby": `${props.inputId}-label`,
@@ -429,7 +1060,8 @@ var builtInRenderers = [
   { type: "nps", Component: ScaleField },
   { type: "single-choice", Component: SingleChoiceField },
   { type: "multi-choice", Component: MultiChoiceField },
-  { type: "yes-no", Component: YesNoField }
+  { type: "yes-no", Component: YesNoField },
+  ...structuredRenderers
 ];
 var defaultRegistry = createRendererRegistry(builtInRenderers);
 function renderSlot(Default, override, props, extra) {
@@ -485,6 +1117,7 @@ function DefaultBrand({ name, logo, className }) {
 function DefaultProgress({ step, total, className }) {
   const { presentation } = useFormPresentation();
   const page = presentation === "page";
+  if (!total) return null;
   const percent = total ? Math.round((page ? step - 1 : step) / total * 100) : 0;
   const bar = /* @__PURE__ */ jsx(
     Progress,
@@ -715,6 +1348,7 @@ function FormBody({
   const errorsKey = useFormSelector(engine, (s) => JSON.stringify(s.errors));
   const ending = useFormSelector(engine, (s) => s.ending);
   const historyLength = useFormSelector(engine, (s) => s.history.length);
+  const description = useFormSelector(engine, () => def.description ? engine.text(def.description) : void 0);
   const path = JSON.parse(pathKey);
   const errors = JSON.parse(errorsKey);
   const formRef = useRef(null);
@@ -899,8 +1533,7 @@ function FormBody({
     const field = /* @__PURE__ */ jsx(FieldRenderer, { id, onAdvance: focus ? scheduleAdvance : void 0 });
     return /* @__PURE__ */ jsx("div", { "data-block": id, className: pageClassic ? classicSection : void 0, children: field }, id);
   };
-  const visiblePath = path.filter((id) => engine.isVisible(id) || engine.block(id)?.kind === "content");
-  const step = current ? Math.max(1, visiblePath.indexOf(current) + 1) : 1;
+  const step = current ? Math.max(1, path.indexOf(current) + 1) : 1;
   const isLast = layout === "classic" || current === path[path.length - 1];
   const errorItems = path.filter((id) => errors[id]).map((id) => ({
     id,
@@ -913,7 +1546,7 @@ function FormBody({
   const header = renderSlot(
     DefaultHeader,
     slots?.header,
-    { title: def.title, description: def.description },
+    { title: def.title, description },
     slotProps?.header
   );
   const errorSummary = errorItems.length > 0 && layout === "classic" ? renderSlot(
@@ -926,7 +1559,10 @@ function FormBody({
     },
     slotProps?.errorSummary
   ) : null;
-  const progress = layout === "focus" ? renderSlot(DefaultProgress, slots?.progress, { step, total: visiblePath.length }, slotProps?.progress) : null;
+  const progress = (
+    // No questions on the path: no "Question 1 of 0".
+    layout === "focus" && path.length > 0 ? renderSlot(DefaultProgress, slots?.progress, { step, total: path.length }, slotProps?.progress) : null
+  );
   const fields = (
     // Disabled once the response is completed (sending, or after a failed send): read-only, not dead.
     /* @__PURE__ */ jsx("fieldset", { disabled: locked, className: "min-w-0 border-0 p-0", children: layout === "focus" ? /* @__PURE__ */ jsx(
@@ -942,7 +1578,7 @@ function FormBody({
         children: current ? renderBlock(current, true) : null
       },
       pageFocus ? current ?? "" : void 0
-    ) : /* @__PURE__ */ jsx("div", { className: pageClassic ? "space-y-4" : "space-y-8", children: visiblePath.map((id) => renderBlock(id, false)) }) })
+    ) : /* @__PURE__ */ jsx("div", { className: pageClassic ? "space-y-4" : "space-y-8", children: path.map((id) => renderBlock(id, false)) }) })
   );
   const failure = phase === "failed" ? /* @__PURE__ */ jsxs("p", { role: "alert", className: cn("text-sm font-medium text-destructive", page && "text-base"), children: [
     "We couldn't send your answers. They're kept here: press ",
@@ -1019,6 +1655,6 @@ function FormBody({
 }
 var classicSection = "rounded-xl border bg-card px-5 py-6 text-card-foreground sm:px-8 has-[[aria-invalid=true]]:border-destructive";
 
-export { FieldChrome, Form, builtInRenderers, defaultRegistry, describedBy, useFormPresentation };
+export { FieldChrome, Form, MediaTimeContext, SourceTextContext, builtInRenderers, defaultRegistry, describedBy, useFormPresentation, useMediaTime, useSourceText };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map