@marktiderman/genesis-forms-web 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,19 +1,20 @@
 "use client";
-import { createContext, useRef, useState, useId, useEffect, useContext, useLayoutEffect } from 'react';
+import { createContext, useState, useEffect, useRef, useId, useContext, useMemo, 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 { ratingDisplay, choiceOptions, otherOption, numberLimits, dateLimits, listLimits, tableColumns, tableLimits, parseTimestamp, formatTimestamp, formatCalculated, photoLimits, photoRefs, getFieldType, scaleLabels, OTHER_MAX_LENGTH, photoCountMessage, isPhotoRef, photoTypeMessage, photoSizeMessage, formProgress } from '@marktiderman/genesis-forms';
+import { createRendererRegistry, useFormSelector, useForm, FormRuntime, useFormContext, FieldRenderer } from '@marktiderman/genesis-forms-react';
 import { Checkbox } from '@marktiderman/genesis-ui/checkbox';
 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, listLimits, tableColumns, tableLimits, parseTimestamp, formatTimestamp, getFieldType } from '@marktiderman/genesis-forms';
-import { FormDescription, FormError, FormLabel } from '@marktiderman/genesis-ui/form-field';
+import { FormError, FormDescription, 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';
+import { Spinner } from '@marktiderman/genesis-ui/spinner';
 
 // src/Form.tsx
 var FormPresentationContext = createContext({ presentation: "embedded", layout: "classic" });
@@ -120,6 +121,29 @@ 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);
@@ -749,6 +773,237 @@ var structuredRenderers = [
   { type: "media-notes", Component: MediaNotesField },
   { type: "text-highlights", Component: TextHighlightsField }
 ];
+var UploadContext = createContext(null);
+function useUpload() {
+  return useContext(UploadContext);
+}
+var PendingUploadsContext = createContext(null);
+function createPendingUploads() {
+  let n = 0;
+  return {
+    start() {
+      n++;
+      let done = false;
+      return () => {
+        if (done) return;
+        done = true;
+        n--;
+      };
+    },
+    count: () => n
+  };
+}
+var UPLOAD_WAIT_MESSAGE = "Wait for the photo to finish uploading.";
+function CameraIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "3" })
+  ] });
+}
+function ImageIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className, children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" })
+  ] });
+}
+function XIcon2() {
+  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" }) });
+}
+var HEIC_NAME = /\.hei[cf]$/i;
+function photoFileType(file) {
+  const type = file.type.toLowerCase();
+  if (type) return type;
+  return HEIC_NAME.test(file.name) ? file.name.toLowerCase().endsWith(".heif") ? "image/heif" : "image/heic" : "";
+}
+function photoFileProblem(field, file) {
+  const limits = photoLimits(field);
+  if (!limits.mimeTypes.includes(photoFileType(file))) return photoTypeMessage(field);
+  if (file.size <= 0 || file.size > limits.maxBytes) return photoSizeMessage(field);
+  return null;
+}
+function photoAccept(field) {
+  const limits = photoLimits(field);
+  return [...limits.mimeTypes, ...limits.formats.includes("heic") ? [".heic", ".heif"] : []].join(",");
+}
+function Tile({ name, preview, busy }) {
+  const [failed, setFailed] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative size-24 overflow-hidden rounded-md border bg-muted sm:size-28", children: [
+    preview && !failed ? /* @__PURE__ */ jsx("img", { src: preview, alt: name, className: cn("size-full object-cover", busy && "opacity-60"), onError: () => setFailed(true) }) : /* @__PURE__ */ jsxs("div", { className: "flex size-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(ImageIcon, { className: "size-6" }),
+      /* @__PURE__ */ jsx("span", { className: "line-clamp-2 break-all", children: name })
+    ] }),
+    busy ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-hidden": "true" }) }) : null
+  ] });
+}
+var nextKey = 0;
+function PhotoField(props) {
+  const { binding, inputId, engine } = props;
+  const { field } = binding;
+  const host = useUpload();
+  const pending = useContext(PendingUploadsContext);
+  const locked = useFormSelector(engine, (s) => s.status === "completed");
+  const limits = photoLimits(field);
+  const refs = photoRefs(binding.value);
+  const [uploading, setUploading] = useState([]);
+  const [problem, setProblem] = useState(null);
+  const [coarse, setCoarse] = useState(false);
+  const previews = useRef(/* @__PURE__ */ new Map());
+  const releases = useRef(/* @__PURE__ */ new Set());
+  const mounted = useRef(true);
+  const chooseRef = useRef(null);
+  const takeRef = useRef(null);
+  useEffect(() => {
+    setCoarse(typeof window !== "undefined" && !!window.matchMedia?.("(pointer: coarse)").matches);
+  }, []);
+  useEffect(() => {
+    const urls = previews.current;
+    const pendingReleases = releases.current;
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      for (const url of urls.values()) URL.revokeObjectURL(url);
+      urls.clear();
+      for (const release of pendingReleases) release();
+      pendingReleases.clear();
+    };
+  }, []);
+  const currentRefs = () => photoRefs(engine.getState().values[field.id]);
+  const full = refs.length + uploading.length >= limits.maxFiles;
+  const disabled = !host || locked;
+  const add = (files) => {
+    if (!host) return;
+    setProblem(null);
+    let room = limits.maxFiles - currentRefs().length - uploading.length;
+    for (const file of files) {
+      if (room <= 0) {
+        setProblem(photoCountMessage(field));
+        break;
+      }
+      const why = photoFileProblem(field, file);
+      if (why) {
+        setProblem(why);
+        continue;
+      }
+      room--;
+      const key = `u${nextKey++}`;
+      const preview = typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : null;
+      setUploading((list) => [...list, { key, name: file.name, preview }]);
+      const release = pending?.start() ?? (() => {
+      });
+      releases.current.add(release);
+      const finish = () => {
+        release();
+        releases.current.delete(release);
+        setUploading((list) => list.filter((u) => u.key !== key));
+      };
+      Promise.resolve().then(() => host.upload(file, field)).then((ref) => {
+        if (!isPhotoRef(ref)) throw new Error("The upload returned no photo reference.");
+        if (preview) {
+          const old = previews.current.get(ref.id);
+          if (old && old !== preview) URL.revokeObjectURL(old);
+          if (mounted.current) previews.current.set(ref.id, preview);
+          else URL.revokeObjectURL(preview);
+        }
+        const next = [...currentRefs().filter((r) => r.id !== ref.id), { id: ref.id, name: ref.name, type: ref.type, size: ref.size }];
+        binding.setValue(next);
+        finish();
+      }).catch(() => {
+        if (preview) URL.revokeObjectURL(preview);
+        setProblem(`\u201C${file.name}\u201D didn't upload. Try again.`);
+        finish();
+      });
+    }
+  };
+  const onPick = (e) => {
+    const files = Array.from(e.target.files ?? []);
+    e.target.value = "";
+    add(files);
+  };
+  const remove = (ref) => {
+    const url = previews.current.get(ref.id);
+    if (url) URL.revokeObjectURL(url);
+    previews.current.delete(ref.id);
+    const next = currentRefs().filter((r) => r.id !== ref.id);
+    binding.setValue(next.length ? next : void 0);
+    setProblem(null);
+  };
+  const accept = photoAccept(field);
+  const errorId = `${inputId}-upload-error`;
+  const hasAny = refs.length > 0 || uploading.length > 0;
+  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    hasAny ? /* @__PURE__ */ jsxs("ul", { className: "flex flex-wrap gap-3", "aria-label": "Photos", children: [
+      refs.map((ref) => /* @__PURE__ */ jsxs("li", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Tile, { name: ref.name, preview: previews.current.get(ref.id) ?? null }),
+        locked ? null : /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "icon",
+            "aria-label": `Remove ${ref.name}`,
+            onClick: () => remove(ref),
+            className: "absolute right-1 top-1 size-7 rounded-full shadow-sm",
+            children: /* @__PURE__ */ jsx(XIcon2, {})
+          }
+        )
+      ] }, ref.id)),
+      uploading.map((u) => /* @__PURE__ */ jsx("li", { "aria-label": `Uploading ${u.name}`, children: /* @__PURE__ */ jsx(Tile, { name: u.name, preview: u.preview, busy: true }) }, u.key))
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          disabled: disabled || full,
+          "aria-invalid": binding.error ? true : void 0,
+          onClick: () => chooseRef.current?.click(),
+          children: [
+            /* @__PURE__ */ jsx(ImageIcon, {}),
+            " ",
+            refs.length ? "Add another photo" : "Choose a photo"
+          ]
+        }
+      ),
+      coarse ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", disabled: disabled || full, onClick: () => takeRef.current?.click(), children: [
+        /* @__PURE__ */ jsx(CameraIcon, {}),
+        " Take a photo"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: chooseRef,
+        type: "file",
+        accept,
+        multiple: limits.maxFiles > 1,
+        className: "hidden",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        disabled,
+        onChange: onPick
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: takeRef,
+        type: "file",
+        accept,
+        capture: "environment",
+        className: "hidden",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        disabled,
+        onChange: onPick
+      }
+    ),
+    !host ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Photos can't be added here." }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: `Up to ${limits.maxFiles} ${limits.maxFiles === 1 ? "photo" : "photos"}, ${limits.maxSizeMb} MB each.` }),
+    problem ? /* @__PURE__ */ jsx(FormError, { id: errorId, role: "alert", children: problem }) : null
+  ] }) });
+}
+var photoRenderers = [{ type: "photo", Component: PhotoField }];
 function groupAria(props) {
   return {
     "aria-labelledby": `${props.inputId}-label`,
@@ -894,32 +1149,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" : "";
@@ -956,6 +1267,7 @@ function useChoiceLook(inputId, count) {
     control: pageFocus ? pageChoiceKey : void 0,
     onKeyDown: pageFocus ? (e) => {
       if (e.altKey || e.ctrlKey || e.metaKey || e.key.length !== 1) return;
+      if (e.target.tagName === "INPUT") return;
       const index = KEYS.indexOf(e.key.toUpperCase());
       if (index < 0 || index >= count) return;
       const option = document.getElementById(`${inputId}-${index}`);
@@ -994,44 +1306,118 @@ function ChoiceContent({ look, index, label }) {
     )
   ] });
 }
+var OTHER_VALUE = "\0other";
+function OtherText({
+  id,
+  label,
+  value,
+  onChange,
+  invalid: invalid2
+}) {
+  const line = useLineClass();
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      value,
+      maxLength: OTHER_MAX_LENGTH,
+      "aria-label": `${label}: your answer`,
+      "aria-invalid": invalid2 || void 0,
+      placeholder: "Type your answer",
+      onChange: (e) => onChange(e.target.value),
+      className: cn("mt-2", line)
+    }
+  );
+}
+var focusSoon = (id) => requestAnimationFrame(() => document.getElementById(id)?.focus());
+function useOtherText(typed) {
+  const [on, setOn] = useState(typed !== "");
+  const [text, setText] = useState(typed);
+  return { on, setOn, text, setText };
+}
 function SingleChoiceField(props) {
   const { binding, inputId, onAdvance } = props;
   const pick = useDeliberatePick(onAdvance);
   const options = choiceOptions(binding.field);
-  const look = useChoiceLook(inputId, options.length);
-  return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsx(
-    RadioGroup,
-    {
-      ...groupAria(props),
-      ...pick.rootProps,
-      onKeyDown: look.onKeyDown,
-      className: look.pageFocus ? "gap-2.5" : void 0,
-      value: typeof binding.value === "string" ? binding.value : "",
-      onValueChange: (v) => binding.setValue(v),
-      children: options.map((o, i) => /* @__PURE__ */ jsxs(Label, { htmlFor: `${inputId}-${i}`, className: look.row, children: [
-        /* @__PURE__ */ jsx(
-          RadioGroupItem,
-          {
-            id: `${inputId}-${i}`,
-            value: o.value,
-            onClick: pick.onItemClick,
-            className: look.control
-          }
-        ),
-        /* @__PURE__ */ jsx(ChoiceContent, { look, index: i, label: o.label ?? o.value })
-      ] }, o.value))
+  const other = otherOption(binding.field);
+  const current = typeof binding.value === "string" ? binding.value : "";
+  const typed = other && current && !options.some((o) => o.value === current) ? current : "";
+  const otherText = useOtherText(typed);
+  const look = useChoiceLook(inputId, options.length + (other ? 1 : 0));
+  const textId = `${inputId}-other-text`;
+  const choose = (v) => {
+    if (v !== OTHER_VALUE) {
+      otherText.setOn(false);
+      binding.setValue(v);
+      return;
     }
-  ) });
+    otherText.setOn(true);
+    binding.setValue(otherText.text.trim() ? otherText.text : void 0);
+    focusSoon(textId);
+  };
+  return /* @__PURE__ */ jsxs(FieldChrome, { props, children: [
+    /* @__PURE__ */ jsxs(
+      RadioGroup,
+      {
+        ...groupAria(props),
+        ...pick.rootProps,
+        onKeyDown: look.onKeyDown,
+        className: look.pageFocus ? "gap-2.5" : void 0,
+        value: otherText.on ? OTHER_VALUE : current,
+        onValueChange: choose,
+        children: [
+          options.map((o, i) => /* @__PURE__ */ jsxs(Label, { htmlFor: `${inputId}-${i}`, className: look.row, children: [
+            /* @__PURE__ */ jsx(
+              RadioGroupItem,
+              {
+                id: `${inputId}-${i}`,
+                value: o.value,
+                onClick: pick.onItemClick,
+                className: look.control
+              }
+            ),
+            /* @__PURE__ */ jsx(ChoiceContent, { look, index: i, label: o.label ?? o.value })
+          ] }, o.value)),
+          other ? (
+            // No auto-advance: the respondent still has to type.
+            /* @__PURE__ */ jsxs(Label, { htmlFor: `${inputId}-${options.length}`, className: look.row, children: [
+              /* @__PURE__ */ jsx(RadioGroupItem, { id: `${inputId}-${options.length}`, value: OTHER_VALUE, className: look.control }),
+              /* @__PURE__ */ jsx(ChoiceContent, { look, index: options.length, label: other.label })
+            ] })
+          ) : null
+        ]
+      }
+    ),
+    other && otherText.on ? /* @__PURE__ */ jsx(
+      OtherText,
+      {
+        id: textId,
+        label: other.label,
+        value: otherText.text,
+        invalid: !!binding.error,
+        onChange: (text) => {
+          otherText.setText(text);
+          binding.setValue(text.trim() ? text : void 0);
+        }
+      }
+    ) : null
+  ] });
 }
 function MultiChoiceField(props) {
   const { binding, inputId } = props;
   const selected = Array.isArray(binding.value) ? binding.value : [];
   const options = choiceOptions(binding.field);
-  const look = useChoiceLook(inputId, options.length);
-  const toggle = (value, on) => {
-    const next = on ? [...selected, value] : selected.filter((v) => v !== value);
+  const other = otherOption(binding.field);
+  const known = new Set(options.map((o) => o.value));
+  const chosen = selected.filter((v) => known.has(v));
+  const otherText = useOtherText(other ? selected.find((v) => !known.has(v)) ?? "" : "");
+  const look = useChoiceLook(inputId, options.length + (other ? 1 : 0));
+  const textId = `${inputId}-other-text`;
+  const commit = (picked, otherOn, text) => {
+    const next = otherOn && text.trim() ? [...picked, text] : picked;
     binding.setValue(next.length ? next : void 0);
   };
+  const toggle = (value, on) => commit(on ? [...chosen, value] : chosen.filter((v) => v !== value), otherText.on, otherText.text);
   return /* @__PURE__ */ jsx(FieldChrome, { props, children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-2", look.pageFocus && "gap-2.5"), onKeyDown: look.onKeyDown, children: [
     look.pageFocus ? /* @__PURE__ */ jsx("p", { className: "-mt-2 mb-1 text-sm text-muted-foreground", children: "Choose as many as you like" }) : null,
     options.map((o, i) => /* @__PURE__ */ jsxs(Label, { htmlFor: `${inputId}-${i}`, className: look.row, children: [
@@ -1046,7 +1432,174 @@ function MultiChoiceField(props) {
         }
       ),
       /* @__PURE__ */ jsx(ChoiceContent, { look, index: i, label: o.label ?? o.value })
-    ] }, o.value))
+    ] }, o.value)),
+    other ? /* @__PURE__ */ jsxs(Label, { htmlFor: `${inputId}-${options.length}`, className: look.row, children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: `${inputId}-${options.length}`,
+          checked: otherText.on,
+          "aria-invalid": binding.error ? true : void 0,
+          onCheckedChange: (c) => {
+            otherText.setOn(c === true);
+            commit(chosen, c === true, otherText.text);
+            if (c === true) focusSoon(textId);
+          },
+          className: look.control
+        }
+      ),
+      /* @__PURE__ */ jsx(ChoiceContent, { look, index: options.length, label: other.label })
+    ] }) : null,
+    other && otherText.on ? /* @__PURE__ */ jsx(
+      OtherText,
+      {
+        id: textId,
+        label: other.label,
+        value: otherText.text,
+        invalid: !!binding.error,
+        onChange: (text) => {
+          otherText.setText(text);
+          commit(chosen, true, text);
+        }
+      }
+    ) : null
+  ] }) });
+}
+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 other = otherOption(binding.field);
+  const line = useLineClass();
+  const current = typeof binding.value === "string" ? binding.value : "";
+  const typed = other && current && !options.some((o) => o.value === current) ? current : "";
+  const otherText = useOtherText(typed);
+  const value = otherText.on ? OTHER_VALUE : current;
+  const textId = `${props.inputId}-other-text`;
+  return /* @__PURE__ */ jsxs(FieldChrome, { props, children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ...controlAria(props),
+        value,
+        onChange: (e) => {
+          const v = e.target.value;
+          otherText.setOn(v === OTHER_VALUE);
+          if (v === OTHER_VALUE) {
+            binding.setValue(otherText.text.trim() ? otherText.text : void 0);
+            focusSoon(textId);
+          } else binding.setValue(v === "" ? void 0 : v);
+        },
+        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)),
+          other ? /* @__PURE__ */ jsx("option", { value: OTHER_VALUE, children: other.label }) : null
+        ]
+      }
+    ),
+    other && otherText.on ? /* @__PURE__ */ jsx(
+      OtherText,
+      {
+        id: textId,
+        label: other.label,
+        value: otherText.text,
+        invalid: !!binding.error,
+        onChange: (text) => {
+          otherText.setText(text);
+          binding.setValue(text.trim() ? text : void 0);
+        }
+      }
+    ) : null
+  ] });
+}
+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 = [
@@ -1061,21 +1614,128 @@ var builtInRenderers = [
   { type: "single-choice", Component: SingleChoiceField },
   { type: "multi-choice", Component: MultiChoiceField },
   { type: "yes-no", Component: YesNoField },
-  ...structuredRenderers
+  { type: "dropdown", Component: DropdownField },
+  { type: "number", Component: NumberField },
+  { type: "date", Component: DateField },
+  { type: "consent", Component: ConsentField },
+  ...structuredRenderers,
+  ...calculatedRenderers,
+  ...photoRenderers
 ];
 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") {
@@ -1083,19 +1743,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) {
@@ -1297,6 +1964,8 @@ function DefaultErrorSummary({ count, errors, className }) {
   );
 }
 var ADVANCE_DELAY_MS = 250;
+var PROGRESS_DELAY_MS = 400;
+var CLASSIC_PROGRESS_DELAY_MS = 1500;
 var engineKeys = /* @__PURE__ */ new WeakMap();
 var nextEngineKey = 0;
 function keyOf(engine) {
@@ -1311,11 +1980,15 @@ function Form(props) {
   return props.engine ? /* @__PURE__ */ jsx(FormWithEngine, { ...props, engine: props.engine }) : /* @__PURE__ */ jsx(OwnedForm, { ...props });
 }
 function OwnedForm(props) {
-  const engine = useForm(props.form, props.options);
+  const engine = useForm(props.form, props.hostOptions ? { ...props.options, hostOptions: props.hostOptions } : props.options);
   return /* @__PURE__ */ jsx(FormWithEngine, { ...props, engine });
 }
 function FormWithEngine(props) {
-  return /* @__PURE__ */ jsx(FormRuntime, { engine: props.engine, registry: props.registry ?? defaultRegistry, children: /* @__PURE__ */ jsx(FormBody, { ...props }, keyOf(props.engine)) });
+  const { onUpload } = props;
+  const outer = useContext(UploadContext);
+  const host = useMemo(() => onUpload ? { upload: onUpload } : outer, [onUpload, outer]);
+  const [pending] = useState(createPendingUploads);
+  return /* @__PURE__ */ jsx(UploadContext.Provider, { value: host, children: /* @__PURE__ */ jsx(PendingUploadsContext.Provider, { value: pending, children: /* @__PURE__ */ jsx(FormRuntime, { engine: props.engine, registry: props.registry ?? defaultRegistry, children: /* @__PURE__ */ jsx(FormBody, { ...props, pendingUploads: pending }, keyOf(props.engine)) }) }) });
 }
 function focusWithin(root) {
   if (!root) return;
@@ -1328,16 +2001,21 @@ function FormBody({
   layout: layoutProp,
   presentation = "embedded",
   brand,
+  theme,
   onSubmit,
   onChange,
+  onProgress,
+  progressNotice = "Your answers save as you go.",
   autoAdvance = true,
-  submitLabel = "Submit",
+  submitLabel = "Send",
+  requiredLabel = "Required",
   nextLabel = "OK",
   retryLabel = "Try again",
   slots,
   slotProps,
   className,
-  testID
+  testID,
+  pendingUploads
 }) {
   const { idPrefix } = useFormContext();
   const def = engine.definition;
@@ -1372,6 +2050,52 @@ function FormBody({
     if (!onChange) return;
     return engine.subscribe(() => onChange(engine.getState(), engine));
   }, [engine, onChange]);
+  const saveProgress = def.settings?.saveProgress === true && !!onProgress;
+  const onProgressRef = useRef(onProgress);
+  onProgressRef.current = onProgress;
+  useEffect(() => {
+    if (!saveProgress) return;
+    let timer;
+    let last = engine.getState();
+    const fire = () => {
+      timer = void 0;
+      if (engine.getState().status === "completed") return;
+      try {
+        void Promise.resolve(onProgressRef.current?.(engine, formProgress(engine))).catch(() => {
+        });
+      } catch {
+      }
+    };
+    const schedule = (delay) => {
+      clearTimeout(timer);
+      timer = setTimeout(fire, delay);
+    };
+    const unsubscribe = engine.subscribe(() => {
+      const state = engine.getState();
+      const previous = last;
+      last = state;
+      if (state.status === "completed") {
+        clearTimeout(timer);
+        timer = void 0;
+        return;
+      }
+      const event = state.events[state.events.length - 1];
+      if (layout === "focus") {
+        if (event?.type === "next" && state.current !== previous.current) schedule(PROGRESS_DELAY_MS);
+      } else if (event?.type === "answer") schedule(CLASSIC_PROGRESS_DELAY_MS);
+    });
+    const flush = () => {
+      if (timer === void 0) return;
+      clearTimeout(timer);
+      fire();
+    };
+    window.addEventListener("pagehide", flush);
+    return () => {
+      unsubscribe();
+      window.removeEventListener("pagehide", flush);
+      flush();
+    };
+  }, [engine, saveProgress, layout]);
   useLayoutEffect(() => {
     if (previousCurrent.current === current) return;
     previousCurrent.current = current;
@@ -1400,8 +2124,14 @@ function FormBody({
     const message = state.current ? state.errors[state.current] : void 0;
     if (message) announce(message);
   };
+  const waitingForUploads = () => {
+    if (pendingUploads.count() === 0) return false;
+    announce(UPLOAD_WAIT_MESSAGE);
+    return true;
+  };
   const finish = async () => {
     if (sending.current) return;
+    if (engine.getState().status !== "completed" && waitingForUploads()) return;
     if (engine.getState().status !== "completed" && !engine.submit()) {
       if (layout === "classic") setSummaryRequest((n) => n + 1);
       else announceStepError();
@@ -1424,6 +2154,7 @@ function FormBody({
   };
   const isLastStep = (state) => state.current === state.path[state.path.length - 1];
   const advance = () => {
+    if (waitingForUploads()) return;
     direction.current = "forward";
     if (isLastStep(engine.getState())) void finish();
     else if (!engine.next()) announceStepError();
@@ -1468,6 +2199,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];
@@ -1482,10 +2217,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),
@@ -1494,7 +2231,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
       ] })
@@ -1502,6 +2239,7 @@ function FormBody({
   }
   const pageFocus = page && layout === "focus";
   const pageClassic = page && layout === "classic";
+  const notice = saveProgress && progressNotice && historyLength === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-gf-progress-notice": "", children: progressNotice }) : null;
   const renderBlock = (id, focus) => {
     const block = engine.block(id);
     if (!block || block.kind === "page-break") return null;
@@ -1543,10 +2281,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(
@@ -1602,6 +2346,7 @@ function FormBody({
     slotProps?.navigation
   );
   const formProps = {
+    ...themed,
     ref: formRef,
     noValidate: true,
     onSubmit: handleSubmit,
@@ -1612,6 +2357,7 @@ function FormBody({
   };
   return /* @__PURE__ */ jsxs(FormPresentationProvider, { value: presentationValue, children: [
     liveRegion,
+    styleNode,
     pageFocus ? /* @__PURE__ */ jsxs(
       "form",
       {
@@ -1623,6 +2369,7 @@ function FormBody({
           /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col justify-center px-4 pb-20 pt-4 sm:px-6 sm:pb-28", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-xl", children: [
             /* @__PURE__ */ jsx("div", { className: historyLength === 0 ? "mb-5" : "sr-only", children: header }),
             fields,
+            notice ? /* @__PURE__ */ jsx("div", { className: "mt-4", children: notice }) : null,
             failure ? /* @__PURE__ */ jsx("div", { className: "mt-6", children: failure }) : null,
             /* @__PURE__ */ jsx("div", { className: "mt-10", children: navigation })
           ] }) })
@@ -1636,6 +2383,7 @@ function FormBody({
         children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-4", children: [
           brandNode ? /* @__PURE__ */ jsx("div", { className: "flex justify-center pb-2", children: brandNode }) : null,
           header,
+          notice,
           errorSummary,
           fields,
           failure,
@@ -1645,9 +2393,11 @@ function FormBody({
     ) : /* @__PURE__ */ jsxs("form", { ...formProps, className: cn("mx-auto w-full max-w-xl space-y-8", className), children: [
       brandNode,
       header,
+      layout === "classic" ? notice : null,
       errorSummary,
       progress,
       fields,
+      layout === "focus" ? notice : null,
       failure,
       navigation
     ] })
@@ -1655,6 +2405,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, MediaTimeContext, SourceTextContext, builtInRenderers, defaultRegistry, describedBy, useFormPresentation, useMediaTime, useSourceText };
+export { CLASSIC_PROGRESS_DELAY_MS, FieldChrome, Form, MediaTimeContext, PROGRESS_DELAY_MS, SourceTextContext, UPLOAD_WAIT_MESSAGE, UploadContext, builtInRenderers, defaultRegistry, describedBy, photoAccept, photoFileProblem, photoFileType, themeColors, themeCss, useFormPresentation, useMediaTime, useSourceText, useUpload };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map