@marktiderman/genesis-forms-web 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,19 +1,20 @@
 "use client";
-import { createContext, useState, useEffect, useRef, useId, 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 { 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 { 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" });
@@ -772,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`,
@@ -1035,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}`);
@@ -1073,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: [
@@ -1125,7 +1432,37 @@ 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() {
@@ -1147,25 +1484,53 @@ function controlAria(props) {
 function DropdownField(props) {
   const { binding } = props;
   const options = choiceOptions(binding.field);
+  const other = otherOption(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))
-      ]
-    }
-  ) });
+  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;
@@ -1254,7 +1619,8 @@ var builtInRenderers = [
   { type: "date", Component: DateField },
   { type: "consent", Component: ConsentField },
   ...structuredRenderers,
-  ...calculatedRenderers
+  ...calculatedRenderers,
+  ...photoRenderers
 ];
 var defaultRegistry = createRendererRegistry(builtInRenderers);
 
@@ -1598,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) {
@@ -1612,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;
@@ -1632,6 +2004,8 @@ function FormBody({
   theme,
   onSubmit,
   onChange,
+  onProgress,
+  progressNotice = "Your answers save as you go.",
   autoAdvance = true,
   submitLabel = "Send",
   requiredLabel = "Required",
@@ -1640,7 +2014,8 @@ function FormBody({
   slots,
   slotProps,
   className,
-  testID
+  testID,
+  pendingUploads
 }) {
   const { idPrefix } = useFormContext();
   const def = engine.definition;
@@ -1675,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;
@@ -1703,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();
@@ -1727,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();
@@ -1811,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;
@@ -1940,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 })
           ] }) })
@@ -1953,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,
@@ -1962,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
     ] })
@@ -1972,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, themeColors, themeCss, 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