@marktiderman/genesis-forms-web 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,17 +1,19 @@
 "use client";
-import { createContext, useRef, useContext, useState, useEffect, useLayoutEffect, useId } from 'react';
+import { createContext, useState, useEffect, useRef, useId, 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 { ratingDisplay, choiceOptions, numberLimits, dateLimits, listLimits, tableColumns, tableLimits, parseTimestamp, formatTimestamp, formatCalculated, getFieldType, scaleLabels } 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,658 @@ function describedBy(props) {
   ].filter(Boolean);
   return ids.length ? ids.join(" ") : void 0;
 }
+function CalculatedField(props) {
+  const { binding, inputId } = props;
+  const { presentation, layout } = useFormPresentation();
+  const pageFocus = presentation === "page" && layout === "focus";
+  const text = formatCalculated(binding.value, binding.field);
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsx(
+    "output",
+    {
+      id: inputId,
+      "aria-labelledby": `${inputId}-label`,
+      "aria-describedby": describedBy(props),
+      "aria-live": "polite",
+      "data-gf-calculated": "",
+      className: cn(
+        "block rounded-md border border-dashed bg-muted/40 px-3 py-2 font-medium tabular-nums",
+        pageFocus ? "text-2xl sm:text-3xl" : "text-base",
+        !text && "text-muted-foreground"
+      ),
+      children: text || "\u2014"
+    }
+  ) });
+}
+var calculatedRenderers = [{ type: "calculated", Component: CalculatedField }];
+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`,
@@ -263,32 +917,88 @@ function scaleValues(type, max) {
   if (type === "nps") return Array.from({ length: 11 }, (_, i) => i);
   return Array.from({ length: max }, (_, i) => i + 1);
 }
+function endLabels(props) {
+  const own = scaleLabels(props.binding.field);
+  if (props.binding.field.type !== "nps") return own;
+  return { low: own.low ?? "Not likely", high: own.high ?? "Very likely" };
+}
+function EndLabels({ inputId, low, high }) {
+  if (!low && !high) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 text-sm text-muted-foreground", "data-gf-scale-labels": "", children: [
+    /* @__PURE__ */ jsx("span", { id: `${inputId}-low`, children: low ?? "" }),
+    /* @__PURE__ */ jsx("span", { id: `${inputId}-high`, className: "text-right", children: high ?? "" })
+  ] });
+}
 function ScaleField(props) {
   const { binding, inputId } = props;
   const max = typeof binding.field.props?.max === "number" ? binding.field.props.max : 5;
   const values = scaleValues(binding.field.type, max);
-  const nps = binding.field.type === "nps";
-  const options = values.map((n, i) => ({
-    value: String(n),
-    label: String(n),
-    describedBy: nps && i === 0 ? `${inputId}-low` : nps && i === values.length - 1 ? `${inputId}-high` : void 0
-  }));
+  const { low, high } = endLabels(props);
+  const stars = binding.field.type === "rating" && ratingDisplay(binding.field) === "stars";
+  const describe = (i) => low && i === 0 ? `${inputId}-low` : high && i === values.length - 1 ? `${inputId}-high` : void 0;
+  const value = typeof binding.value === "number" ? String(binding.value) : "";
+  const onValueChange = (v) => binding.setValue(Number(v));
+  if (stars) {
+    return /* @__PURE__ */ jsxs(FieldChrome, { props, children: [
+      /* @__PURE__ */ jsx(StarRadioGroup, { props, values, value, onValueChange, describe }),
+      /* @__PURE__ */ jsx(EndLabels, { inputId, low, high })
+    ] });
+  }
+  const options = values.map((n, i) => ({ value: String(n), label: String(n), describedBy: describe(i) }));
   return /* @__PURE__ */ jsxs(FieldChrome, { props, children: [
-    /* @__PURE__ */ jsx(
-      ButtonRadioGroup,
-      {
-        props,
-        options,
-        value: typeof binding.value === "number" ? String(binding.value) : "",
-        onValueChange: (v) => binding.setValue(Number(v))
-      }
-    ),
-    nps ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { id: `${inputId}-low`, children: "Not likely" }),
-      /* @__PURE__ */ jsx("span", { id: `${inputId}-high`, children: "Very likely" })
-    ] }) : null
+    /* @__PURE__ */ jsx(ButtonRadioGroup, { props, options, value, onValueChange }),
+    /* @__PURE__ */ jsx(EndLabels, { inputId, low, high })
   ] });
 }
+function StarIcon({ filled }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      className: cn("size-8 transition-colors motion-reduce:transition-none", filled ? "fill-primary text-primary" : "fill-transparent text-muted-foreground"),
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z" })
+    }
+  );
+}
+function StarRadioGroup({
+  props,
+  values,
+  value,
+  onValueChange,
+  describe
+}) {
+  const pick = useDeliberatePick(props.onAdvance);
+  const chosen = value === "" ? 0 : Number(value);
+  const max = values[values.length - 1] ?? 5;
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      ...groupAria(props),
+      ...pick.rootProps,
+      value,
+      onValueChange,
+      className: "flex flex-wrap justify-start gap-1",
+      "data-gf-stars": "",
+      children: values.map((n, i) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          RadioGroupItem,
+          {
+            value: String(n),
+            "aria-label": `${n} of ${max}`,
+            "aria-describedby": describe(i),
+            onClick: pick.onItemClick,
+            className: "peer size-11 aspect-auto rounded-md border-0 bg-transparent shadow-none hover:bg-accent data-[state=checked]:bg-transparent [&_svg]:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 flex items-center justify-center peer-disabled:opacity-50", children: /* @__PURE__ */ jsx(StarIcon, { filled: n <= chosen }) })
+      ] }, n))
+    }
+  );
+}
 function YesNoField(props) {
   const { binding } = props;
   const current = binding.value === true ? "yes" : binding.value === false ? "no" : "";
@@ -418,6 +1128,115 @@ function MultiChoiceField(props) {
     ] }, o.value))
   ] }) });
 }
+function useLineClass() {
+  const { presentation, layout } = useFormPresentation();
+  if (presentation === "page" && layout === "focus") {
+    return "h-auto rounded-none border-0 border-b-2 border-input bg-transparent px-0 py-2 text-xl shadow-none md:text-2xl sm:text-2xl focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-offset-0 aria-invalid:border-destructive";
+  }
+  return presentation === "page" ? "h-11 md:text-base" : void 0;
+}
+function controlAria(props) {
+  return {
+    id: props.inputId,
+    "data-gf-focus": "",
+    "aria-invalid": props.binding.error ? true : void 0,
+    "aria-required": props.binding.field.required || void 0,
+    "aria-describedby": describedBy(props)
+  };
+}
+function DropdownField(props) {
+  const { binding } = props;
+  const options = choiceOptions(binding.field);
+  const line = useLineClass();
+  const value = typeof binding.value === "string" ? binding.value : "";
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsxs(
+    "select",
+    {
+      ...controlAria(props),
+      value,
+      onChange: (e) => binding.setValue(e.target.value === "" ? void 0 : e.target.value),
+      className: cn(
+        "flex h-10 w-full min-w-0 rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:border-destructive",
+        value === "" && "text-muted-foreground",
+        line
+      ),
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: binding.field.placeholder ?? "Choose\u2026" }),
+        options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label ?? o.value }, o.value))
+      ]
+    }
+  ) });
+}
+function NumberField(props) {
+  const { binding } = props;
+  const { min, max, step } = numberLimits(binding.field);
+  const line = useLineClass();
+  const shown = typeof binding.value === "number" ? String(binding.value) : typeof binding.value === "string" ? binding.value : "";
+  const [text, setText] = useState(shown);
+  useEffect(() => {
+    setText((typed) => typed.trim() !== "" && Number(typed.trim().replace(",", ".")) === binding.value ? typed : shown);
+  }, [shown, binding.value]);
+  return /* @__PURE__ */ jsxs(FieldChrome, { props, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...controlAria(props),
+        type: "text",
+        inputMode: min !== void 0 && min >= 0 && (step === void 0 || Number.isInteger(step)) ? "numeric" : "decimal",
+        autoComplete: "off",
+        value: text,
+        placeholder: binding.field.placeholder,
+        className: line,
+        onChange: (e) => {
+          const raw = e.target.value;
+          setText(raw);
+          const t = raw.trim().replace(",", ".");
+          if (t === "") binding.setValue(void 0);
+          else {
+            const n = Number(t);
+            binding.setValue(Number.isFinite(n) && /^[-+]?(\d+\.?\d*|\.\d+)(e[-+]?\d+)?$/i.test(t) ? n : raw);
+          }
+        }
+      }
+    ),
+    min !== void 0 || max !== void 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-gf-number-range": "", children: min !== void 0 && max !== void 0 ? `From ${min} to ${max}` : min !== void 0 ? `${min} or more` : `${max} or less` }) : null
+  ] });
+}
+function DateField(props) {
+  const { binding } = props;
+  const { min, max } = dateLimits(binding.field);
+  const line = useLineClass();
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...controlAria(props),
+      type: "date",
+      min,
+      max,
+      value: typeof binding.value === "string" ? binding.value : "",
+      className: cn("w-full sm:w-auto sm:min-w-48", line),
+      onChange: (e) => binding.setValue(e.target.value === "" ? void 0 : e.target.value)
+    }
+  ) });
+}
+function ConsentField(props) {
+  const { binding, inputId } = props;
+  const text = typeof binding.field.props?.text === "string" && binding.field.props.text.trim() ? binding.field.props.text : "I agree";
+  const look = useChoiceLook(inputId, 1);
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsxs(Label, { htmlFor: `${inputId}-0`, className: look.row, children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id: `${inputId}-0`,
+        checked: binding.value === true,
+        "aria-invalid": binding.error ? true : void 0,
+        "aria-required": binding.field.required || void 0,
+        onCheckedChange: (c) => binding.setValue(c === true ? true : void 0)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: props.engine.text(text) })
+  ] }) });
+}
 var builtInRenderers = [
   { type: "short-text", Component: (p) => /* @__PURE__ */ jsx(TextField, { ...p }) },
   { type: "long-text", Component: (p) => /* @__PURE__ */ jsx(TextField, { ...p, multiline: true }) },
@@ -429,21 +1248,128 @@ 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 },
+  { type: "dropdown", Component: DropdownField },
+  { type: "number", Component: NumberField },
+  { type: "date", Component: DateField },
+  { type: "consent", Component: ConsentField },
+  ...structuredRenderers,
+  ...calculatedRenderers
 ];
 var defaultRegistry = createRendererRegistry(builtInRenderers);
+
+// src/theme.ts
+function parseColor(value) {
+  const v = value.trim().toLowerCase();
+  let m = /^#([0-9a-f]{3})$/.exec(v);
+  if (m) return [...m[1]].map((c) => parseInt(c + c, 16));
+  m = /^#([0-9a-f]{6})$/.exec(v);
+  if (m) return [0, 2, 4].map((i) => parseInt(m[1].slice(i, i + 2), 16));
+  m = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.exec(v);
+  if (m) {
+    const rgb = [m[1], m[2], m[3]].map(Number);
+    return rgb.every((c) => c <= 255) ? rgb : null;
+  }
+  return null;
+}
+function rgbToHsl([r, g, b]) {
+  const [rn, gn, bn] = [r / 255, g / 255, b / 255];
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l * 100];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  const h = max === rn ? (gn - bn) / d + (gn < bn ? 6 : 0) : max === gn ? (bn - rn) / d + 2 : (rn - gn) / d + 4;
+  return [h * 60, s * 100, l * 100];
+}
+function hslToRgb(h, s, l) {
+  const sn = s / 100;
+  const ln = l / 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = sn * Math.min(ln, 1 - ln);
+  const f = (n) => ln - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return [f(0), f(8), f(4)].map((x) => Math.round(x * 255));
+}
+function luminance([r, g, b]) {
+  const c = (x) => {
+    const n = x / 255;
+    return n <= 0.03928 ? n / 12.92 : ((n + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * c(r) + 0.7152 * c(g) + 0.0722 * c(b);
+}
+function contrast(a, b) {
+  const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p);
+  return (x + 0.05) / (y + 0.05);
+}
+var WHITE = [255, 255, 255];
+var NEAR_BLACK = hslToRgb(240, 10, 3.9);
+var WHITE_HSL = "0 0% 100%";
+var NEAR_BLACK_HSL = "240 10% 3.9%";
+var fmt = (h, s, l) => `${Math.round(h)} ${Math.round(s)}% ${Math.round(l * 10) / 10}%`;
+function fit(h, s, l, page, darken) {
+  let light = l;
+  for (let i = 0; i < 100 && contrast(hslToRgb(h, s, light), page) < 3; i++) light = Math.max(0, Math.min(100, light + (darken ? -1 : 1)));
+  const best = () => {
+    const rgb = hslToRgb(h, s, light);
+    const white = contrast(rgb, WHITE);
+    const dark = contrast(rgb, NEAR_BLACK);
+    return white >= dark ? { ratio: white, fg: WHITE_HSL } : { ratio: dark, fg: NEAR_BLACK_HSL };
+  };
+  let pick = best();
+  for (let i = 0; i < 100 && pick.ratio < 4.5; i++) {
+    light = Math.min(100, light + 1);
+    pick = { ratio: contrast(hslToRgb(h, s, light), NEAR_BLACK), fg: NEAR_BLACK_HSL };
+  }
+  return { primary: fmt(h, s, light), primaryForeground: pick.fg };
+}
+function themeColors(accent) {
+  const rgb = parseColor(accent);
+  if (!rgb) return null;
+  const [h, s, l] = rgbToHsl(rgb);
+  return { light: fit(h, s, l, WHITE, true), dark: fit(h, s, l, NEAR_BLACK, false) };
+}
+function themeCss(theme, selector) {
+  const colors = theme?.accent ? themeColors(theme.accent) : null;
+  if (!colors) return "";
+  const block = (c) => `--primary: ${c.primary}; --primary-foreground: ${c.primaryForeground}; --ring: ${c.primary};`;
+  return `${selector} { ${block(colors.light)} }
+.dark ${selector}, ${selector}.dark { ${block(colors.dark)} }`;
+}
 function renderSlot(Default, override, props, extra) {
   if (override === null) return null;
   const Component = override ?? Default;
   return /* @__PURE__ */ jsx(Component, { ...props, ...extra });
 }
 var focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
-function DefaultHeader({ title, description, className }) {
+function RequiredNote({ text, className }) {
+  return /* @__PURE__ */ jsxs("p", { className: cn("text-sm text-muted-foreground", className), "data-gf-required-note": "", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-destructive", "aria-hidden": "true", children: [
+      "*",
+      " "
+    ] }),
+    text
+  ] });
+}
+function HeaderImage({ image, className }) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: image.src,
+      alt: image.alt,
+      "data-gf-header-image": "",
+      className: cn("block h-32 w-full object-cover sm:h-44", className)
+    }
+  );
+}
+function DefaultHeader({ title, description, image, requiredNote, className }) {
   const { presentation, layout } = useFormPresentation();
   if (presentation === "page" && layout === "focus") {
     return /* @__PURE__ */ jsxs("header", { className: cn("space-y-1", className), children: [
+      image ? /* @__PURE__ */ jsx(HeaderImage, { image, className: "mb-4 rounded-lg" }) : null,
       /* @__PURE__ */ jsx("h1", { className: "text-sm font-medium text-muted-foreground", children: title }),
-      description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+      description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+      requiredNote ? /* @__PURE__ */ jsx(RequiredNote, { text: requiredNote }) : null
     ] });
   }
   if (presentation === "page") {
@@ -451,19 +1377,26 @@ function DefaultHeader({ title, description, className }) {
       "header",
       {
         className: cn(
-          "rounded-xl border border-t-8 border-t-primary bg-card px-5 py-6 text-card-foreground sm:px-8 sm:py-8",
+          "overflow-hidden rounded-xl border bg-card text-card-foreground",
+          !image && "border-t-8 border-t-primary",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }),
-          description ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground text-pretty", children: description }) : null
+          image ? /* @__PURE__ */ jsx(HeaderImage, { image }) : null,
+          /* @__PURE__ */ jsxs("div", { className: cn("px-5 py-6 sm:px-8 sm:py-8", image && "border-t-8 border-t-primary"), children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }),
+            description ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground text-pretty", children: description }) : null,
+            requiredNote ? /* @__PURE__ */ jsx(RequiredNote, { text: requiredNote, className: "mt-4" }) : null
+          ] })
         ]
       }
     );
   }
   return /* @__PURE__ */ jsxs("header", { className: cn("space-y-1", className), children: [
+    image ? /* @__PURE__ */ jsx(HeaderImage, { image, className: "mb-4 rounded-lg" }) : null,
     /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: title }),
-    description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }) : null
+    description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }) : null,
+    requiredNote ? /* @__PURE__ */ jsx(RequiredNote, { text: requiredNote, className: "pt-1" }) : null
   ] });
 }
 function initials(name) {
@@ -485,6 +1418,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,
@@ -695,10 +1629,12 @@ function FormBody({
   layout: layoutProp,
   presentation = "embedded",
   brand,
+  theme,
   onSubmit,
   onChange,
   autoAdvance = true,
-  submitLabel = "Submit",
+  submitLabel = "Send",
+  requiredLabel = "Required",
   nextLabel = "OK",
   retryLabel = "Try again",
   slots,
@@ -835,6 +1771,10 @@ function FormBody({
   };
   const liveRegion = /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", "data-gf-live": "", children: announcement });
   const presentationValue = { presentation, layout };
+  const themeId = `gf-theme-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const themeStyle = themeCss(theme, `[data-gf-theme="${themeId}"]`);
+  const themed = themeStyle ? { "data-gf-theme": themeId } : {};
+  const styleNode = themeStyle ? /* @__PURE__ */ jsx("style", { children: themeStyle }) : null;
   const brandNode = brand ? renderSlot(DefaultBrand, slots?.brand, { name: brand.name, logo: brand.logo }, slotProps?.brand) : null;
   if (showEnding) {
     const end = def.endings?.find((x) => x.id === ending) ?? def.endings?.[0];
@@ -849,10 +1789,12 @@ function FormBody({
     );
     return /* @__PURE__ */ jsxs(FormPresentationProvider, { value: presentationValue, children: [
       liveRegion,
+      styleNode,
       page ? /* @__PURE__ */ jsxs(
         "div",
         {
           ref: endingRef,
+          ...themed,
           "data-presentation": "page",
           "data-testid": testID,
           className: cn("flex min-h-dvh w-full flex-col bg-background text-foreground", className),
@@ -861,7 +1803,7 @@ function FormBody({
             /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center px-4 pb-24 pt-8 sm:px-6", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: endingNode }) })
           ]
         }
-      ) : /* @__PURE__ */ jsxs("div", { ref: endingRef, className: cn("mx-auto w-full max-w-xl space-y-6", className), "data-testid": testID, children: [
+      ) : /* @__PURE__ */ jsxs("div", { ref: endingRef, ...themed, className: cn("mx-auto w-full max-w-xl space-y-6", className), "data-testid": testID, children: [
         brandNode,
         endingNode
       ] })
@@ -910,10 +1852,16 @@ function FormBody({
   }));
   const currentField = pageFocus && current ? engine.field(current) : void 0;
   const keyHint = currentField ? currentField.type === "long-text" ? `${modKey} + Enter` : "Enter \u21B5" : void 0;
+  const hasRequired = def.blocks.some((b) => b.kind === "field" && b.required === true);
   const header = renderSlot(
     DefaultHeader,
     slots?.header,
-    { title: def.title, description },
+    {
+      title: def.title,
+      description,
+      image: theme?.headerImage ? { src: theme.headerImage, alt: theme.headerImageAlt ?? "" } : void 0,
+      requiredNote: hasRequired && requiredLabel ? requiredLabel : void 0
+    },
     slotProps?.header
   );
   const errorSummary = errorItems.length > 0 && layout === "classic" ? renderSlot(
@@ -926,7 +1874,10 @@ function FormBody({
     },
     slotProps?.errorSummary
   ) : null;
-  const progress = layout === "focus" ? renderSlot(DefaultProgress, slots?.progress, { step, total: path.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(
@@ -966,6 +1917,7 @@ function FormBody({
     slotProps?.navigation
   );
   const formProps = {
+    ...themed,
     ref: formRef,
     noValidate: true,
     onSubmit: handleSubmit,
@@ -976,6 +1928,7 @@ function FormBody({
   };
   return /* @__PURE__ */ jsxs(FormPresentationProvider, { value: presentationValue, children: [
     liveRegion,
+    styleNode,
     pageFocus ? /* @__PURE__ */ jsxs(
       "form",
       {
@@ -1019,6 +1972,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, themeColors, themeCss, useFormPresentation, useMediaTime, useSourceText };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map