@usefillo/react 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -37,8 +37,10 @@ interface FilloFieldIds {
     errorId: string;
     name: string;
 }
-interface FieldComponentProps {
-    field: Field;
+interface FieldComponentProps<F extends Field = Field> {
+    /** Narrow with the type param to skip a cast, e.g.
+     *  `FieldComponentProps<CustomField>` to read `field.config` directly. */
+    field: F;
     value: FieldValue;
     error: string | undefined;
     setValue: (value: FieldValue) => void;
@@ -174,12 +176,18 @@ interface FieldHandle {
  */
 declare function useField(fieldId: string): FieldHandle;
 
-declare function BlockRenderer({ block, api, components, customComponents, }: {
+interface BlockRendererProps {
     block: Block;
     api: FilloApi;
     components?: FieldComponents;
     customComponents?: CustomComponents;
-}): react.JSX.Element | null;
+}
+declare function BlockRendererInner({ block, api, components, customComponents }: BlockRendererProps): react.JSX.Element | null;
+/**
+ * Memoized so a keystroke in one field doesn't re-render every other field —
+ * see blockPropsEqual for exactly what a block is allowed to depend on.
+ */
+declare const BlockRenderer: react.MemoExoticComponent<typeof BlockRendererInner>;
 /**
  * Render a single field by id using the default (or overridden) component —
  * drop it anywhere inside a <FilloProvider> to place fields in your own

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/FilloForm.tsx
-import { useEffect as useEffect7, useId as useId2, useMemo as useMemo2, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect7, useId as useId2, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
 import {
   FilloError as FilloError2,
   createClient,
@@ -12,7 +12,7 @@ import {
 
 // src/context.ts
 import { allFields } from "@usefillo/core";
-import { createContext, useContext, useId } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 var FilloContext = createContext(null);
 var FilloInstanceIdContext = createContext(null);
 function useFilloInstanceId() {
@@ -41,7 +41,12 @@ function useFilloFieldIds(fieldId, ids) {
 }
 function useField(fieldId) {
   const api = useFillo();
-  const field = allFields(api.form).find((f) => f.id === fieldId);
+  const fieldsById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const f of allFields(api.form)) map.set(f.id, f);
+    return map;
+  }, [api.form]);
+  const field = fieldsById.get(fieldId);
   return {
     field,
     value: api.data[fieldId],
@@ -51,7 +56,7 @@ function useField(fieldId) {
 }
 
 // src/controller.ts
-import { useEffect, useRef, useSyncExternalStore } from "react";
+import { useEffect, useMemo as useMemo2, useRef, useSyncExternalStore } from "react";
 import {
   createFormController
 } from "@usefillo/core";
@@ -78,17 +83,20 @@ function useFilloController(options) {
   }, [store, options.form, options.formId, options.client]);
   useEffect(() => () => store.destroy(), [store]);
   const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
-  return {
-    form: options.form,
-    formId: options.formId,
-    client: options.client,
-    ...state,
-    setValue: store.setValue,
-    setUploading: store.setUploading,
-    next: store.next,
-    back: store.back,
-    submit: store.submit
-  };
+  return useMemo2(
+    () => ({
+      form: options.form,
+      formId: options.formId,
+      client: options.client,
+      ...state,
+      setValue: store.setValue,
+      setUploading: store.setUploading,
+      next: store.next,
+      back: store.back,
+      submit: store.submit
+    }),
+    [store, state, options.form, options.formId, options.client]
+  );
 }
 
 // src/define.ts
@@ -123,7 +131,7 @@ function useCodeFormSync(form, client, onError) {
 
 // src/fields.tsx
 import { isField, pipeBlock, validateResponse } from "@usefillo/core";
-import { useEffect as useEffect6, useState as useState5 } from "react";
+import { memo, useEffect as useEffect6, useState as useState5 } from "react";
 
 // src/phone.tsx
 import {
@@ -135,7 +143,7 @@ import {
   parsePhone,
   toE164
 } from "@usefillo/core";
-import { useEffect as useEffect3, useLayoutEffect, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function localeCountry() {
   if (typeof navigator === "undefined") return void 0;
@@ -234,7 +242,7 @@ function CountrySelect({
   const rootRef = useRef2(null);
   const searchRef = useRef2(null);
   const listId = `${labelledBy}-countries`;
-  const matches = useMemo(() => {
+  const matches = useMemo3(() => {
     const q = query.trim().toLowerCase();
     if (!q) return PHONE_COUNTRIES;
     const qDigits = q.replace(/[^\d]/g, "");
@@ -357,9 +365,11 @@ import { useEffect as useEffect4, useRef as useRef3, useState as useState3 } fro
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SignatureField({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
+  const typedInputId = `${ids.inputId}-typed`;
   const canvasRef = useRef3(null);
   const drawing = useRef3(false);
   const [hasInk, setHasInk] = useState3(Boolean(value));
+  const [typedName, setTypedName] = useState3("");
   useEffect4(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -387,12 +397,31 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
   function start(e) {
     drawing.current = true;
     e.currentTarget.setPointerCapture(e.pointerId);
+    if (typedName) setTypedName("");
     const ctx = e.currentTarget.getContext("2d");
     if (!ctx) return;
     const { x, y } = point(e);
     ctx.beginPath();
     ctx.moveTo(x, y);
   }
+  function drawTypedName(text) {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+    const rect = canvas.getBoundingClientRect();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (text.trim()) {
+      ctx.fillStyle = getComputedStyle(canvas).color;
+      ctx.font = `italic ${Math.min(40, rect.height * 0.45)}px "Segoe Script", "Brush Script MT", cursive`;
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, 12, rect.height / 2);
+      setHasInk(true);
+      setValue(canvas.toDataURL("image/png"));
+    } else {
+      setHasInk(false);
+      setValue(null);
+    }
+  }
   function move(e) {
     if (!drawing.current) return;
     const ctx = e.currentTarget.getContext("2d");
@@ -413,33 +442,63 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
     if (!canvas || !ctx) return;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     setHasInk(false);
+    setTypedName("");
     setValue(null);
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ jsxs2("div", { className: `fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`, children: [
-    /* @__PURE__ */ jsxs2("label", { className: "fillo-label", htmlFor: ids.inputId, children: [
+    /* @__PURE__ */ jsxs2("span", { className: "fillo-label", id: ids.labelId, children: [
       field.label,
       !field.required && /* @__PURE__ */ jsx2("span", { className: "fillo-optional", children: " (optional)" })
     ] }),
     field.description && /* @__PURE__ */ jsx2("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
-    /* @__PURE__ */ jsxs2("div", { className: "fillo-signature", children: [
-      /* @__PURE__ */ jsx2(
-        "canvas",
-        {
-          ref: canvasRef,
-          id: ids.inputId,
-          className: "fillo-signature-canvas",
-          "aria-invalid": error ? true : void 0,
-          "aria-describedby": describedBy,
-          onPointerDown: start,
-          onPointerMove: move,
-          onPointerUp: end,
-          onPointerLeave: end
-        }
-      ),
-      hasInk && /* @__PURE__ */ jsx2("button", { type: "button", className: "fillo-signature-clear", onClick: clear, children: "Clear" }),
-      !hasInk && /* @__PURE__ */ jsx2("span", { className: "fillo-signature-hint", children: "Sign here" })
-    ] }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": ids.labelId,
+        "aria-describedby": describedBy,
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "fillo-signature", children: [
+            /* @__PURE__ */ jsx2(
+              "canvas",
+              {
+                ref: canvasRef,
+                className: "fillo-signature-canvas",
+                "aria-hidden": "true",
+                onPointerDown: start,
+                onPointerMove: move,
+                onPointerUp: end,
+                onPointerLeave: end
+              }
+            ),
+            hasInk && /* @__PURE__ */ jsx2("button", { type: "button", className: "fillo-signature-clear", onClick: clear, children: "Clear" }),
+            !hasInk && /* @__PURE__ */ jsx2("span", { className: "fillo-signature-hint", "aria-hidden": "true", children: "Sign here" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "fillo-signature-type", children: [
+            /* @__PURE__ */ jsx2("label", { className: "fillo-signature-type-label", htmlFor: typedInputId, children: "Or type your full name to sign" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                id: typedInputId,
+                type: "text",
+                className: "fillo-input fillo-signature-type-input",
+                autoComplete: "name",
+                value: typedName,
+                required: field.required || void 0,
+                "aria-required": field.required || void 0,
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": describedBy,
+                onChange: (e) => {
+                  setTypedName(e.target.value);
+                  drawTypedName(e.target.value);
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     error && /* @__PURE__ */ jsx2("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
   ] });
 }
@@ -447,6 +506,21 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
 // src/upload.tsx
 import { useEffect as useEffect5, useRef as useRef4, useState as useState4 } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function uploadStatus(inFlight, doneCount) {
+  const failed = inFlight.filter((f) => f.error).length;
+  const active = inFlight.length - failed;
+  const parts = [];
+  if (active > 0) {
+    parts.push(`Uploading ${active} ${active === 1 ? "file" : "files"}, please wait\u2026`);
+  }
+  if (failed > 0) {
+    parts.push(`${failed} ${failed === 1 ? "upload" : "uploads"} failed.`);
+  }
+  if (active === 0 && doneCount > 0) {
+    parts.push(`${doneCount} ${doneCount === 1 ? "file" : "files"} uploaded.`);
+  }
+  return parts.join(" ");
+}
 function formatBytes(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(0)} KB`;
@@ -584,6 +658,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
         ]
       }
     ),
+    /* @__PURE__ */ jsx3("div", { role: "status", "aria-live": "polite", className: "fillo-sr-only", children: uploadStatus(inFlight, files.length) }),
     (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs3("ul", { className: "fillo-files", children: [
       files.map((f) => /* @__PURE__ */ jsxs3("li", { className: "fillo-file fillo-file--done", children: [
         /* @__PURE__ */ jsx3("span", { className: "fillo-file-name", children: f.name }),
@@ -599,39 +674,53 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
           }
         )
       ] }, f.fileId)),
-      inFlight.map((f) => /* @__PURE__ */ jsxs3("li", { className: `fillo-file${f.error ? " fillo-file--failed" : ""}`, children: [
-        /* @__PURE__ */ jsx3("span", { className: "fillo-file-name", children: f.name }),
-        f.error ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3("span", { className: "fillo-file-meta", children: f.error }),
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              className: "fillo-file-remove",
-              "aria-label": "Dismiss",
-              onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
-              children: "\xD7"
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsxs3("span", { className: "fillo-file-meta", children: [
-            Math.round(f.fraction * 100),
-            "% of ",
-            formatBytes(f.size)
-          ] }),
-          /* @__PURE__ */ jsx3("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("span", { className: "fillo-progress-bar", style: { width: `${f.fraction * 100}%` } }) }),
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              className: "fillo-file-remove",
-              "aria-label": `Cancel ${f.name}`,
-              onClick: () => cancelUpload(f.key),
-              children: "\xD7"
-            }
-          )
-        ] })
-      ] }, f.key))
+      inFlight.map((f) => /* @__PURE__ */ jsxs3(
+        "li",
+        {
+          className: `fillo-file${f.error ? " fillo-file--failed" : ""}`,
+          ...f.error ? {} : {
+            role: "progressbar",
+            "aria-label": `Uploading ${f.name}`,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(f.fraction * 100)
+          },
+          children: [
+            /* @__PURE__ */ jsx3("span", { className: "fillo-file-name", children: f.name }),
+            f.error ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsx3("span", { className: "fillo-file-meta", children: f.error }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: "fillo-file-remove",
+                  "aria-label": "Dismiss",
+                  onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
+                  children: "\xD7"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsxs3("span", { className: "fillo-file-meta", children: [
+                Math.round(f.fraction * 100),
+                "% of ",
+                formatBytes(f.size)
+              ] }),
+              /* @__PURE__ */ jsx3("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("span", { className: "fillo-progress-bar", style: { width: `${f.fraction * 100}%` } }) }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: "fillo-file-remove",
+                  "aria-label": `Cancel ${f.name}`,
+                  onClick: () => cancelUpload(f.key),
+                  children: "\xD7"
+                }
+              )
+            ] })
+          ]
+        },
+        f.key
+      ))
     ] }),
     error && /* @__PURE__ */ jsx3("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
   ] });
@@ -782,12 +871,14 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
           },
           opt.id
         )),
-        choice.allowOther && /* @__PURE__ */ jsxs4(
-          "label",
+        choice.allowOther && // A <div>, not a <label>, so editing the free-text input below can't
+        // toggle the radio. The radio + "Other" text keep their own <label>.
+        /* @__PURE__ */ jsxs4(
+          "div",
           {
             className: `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`,
             children: [
-              /* @__PURE__ */ jsxs4("span", { className: "fillo-option-main", children: [
+              /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
                 /* @__PURE__ */ jsx4(
                   "input",
                   {
@@ -808,6 +899,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
                 {
                   type: "text",
                   className: "fillo-input fillo-other-input",
+                  "aria-label": "Other \u2014 please specify",
                   placeholder: "Your answer",
                   autoFocus: !isOtherValue,
                   value: isOtherValue ? String(value) : "",
@@ -860,12 +952,14 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
           },
           opt.id
         )),
-        choice.allowOther && /* @__PURE__ */ jsxs4(
-          "label",
+        choice.allowOther && // A <div>, not a <label>, so editing the free-text input below can't
+        // toggle the checkbox. The checkbox + "Other" text keep their own <label>.
+        /* @__PURE__ */ jsxs4(
+          "div",
           {
             className: `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`,
             children: [
-              /* @__PURE__ */ jsxs4("span", { className: "fillo-option-main", children: [
+              /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
                 /* @__PURE__ */ jsx4(
                   "input",
                   {
@@ -889,6 +983,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
                 {
                   type: "text",
                   className: "fillo-input fillo-other-input",
+                  "aria-label": "Other \u2014 please specify",
                   placeholder: "Your answer",
                   autoFocus: otherText === void 0,
                   value: otherText ?? "",
@@ -945,6 +1040,7 @@ function Dropdown({ field, value, error, setValue, ids: providedIds }) {
       {
         type: "text",
         className: "fillo-input fillo-other-input fillo-other-input--block",
+        "aria-label": "Other \u2014 please specify",
         placeholder: "Your answer",
         autoFocus: !isOtherValue,
         value: isOtherValue ? String(value) : "",
@@ -1018,22 +1114,62 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
     }
   );
 }
+function radiogroupKeyDown(e, steps, current, setValue) {
+  const forward = e.key === "ArrowRight" || e.key === "ArrowDown";
+  const backward = e.key === "ArrowLeft" || e.key === "ArrowUp";
+  if (!forward && !backward) return;
+  e.preventDefault();
+  const index = current == null ? -1 : steps.indexOf(current);
+  let next;
+  if (index === -1) {
+    next = forward ? 0 : steps.length - 1;
+  } else {
+    next = forward ? index + 1 : index - 1;
+    next = (next + steps.length) % steps.length;
+  }
+  const value = steps[next];
+  if (value === void 0) return;
+  setValue(value);
+  const group = e.currentTarget;
+  const buttons = group.querySelectorAll('[role="radio"]');
+  buttons[next]?.focus();
+}
+function rovingIndex(steps, current) {
+  if (current == null) return 0;
+  const i = steps.indexOf(current);
+  return i === -1 ? 0 : i;
+}
 function Rating({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const max = field.max ?? 5;
   const current = typeof value === "number" ? value : 0;
-  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4("div", { className: "fillo-rating", role: "group", "aria-label": field.label, ...fieldAria(field, error, ids), children: Array.from({ length: max }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsx4(
-    "button",
+  const steps = Array.from({ length: max }, (_, i) => i + 1);
+  const selected = current > 0 ? current : null;
+  const tabbable = rovingIndex(steps, selected);
+  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
+    "div",
     {
-      type: "button",
-      className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
-      "aria-label": `${n} of ${max}`,
-      "aria-pressed": n === current,
-      onClick: () => setValue(n === current ? null : n),
-      children: "\u2605"
-    },
-    n
-  )) }) });
+      className: "fillo-rating",
+      role: "radiogroup",
+      "aria-labelledby": ids.labelId,
+      ...fieldAria(field, error, ids),
+      onKeyDown: (e) => radiogroupKeyDown(e, steps, selected, (n) => setValue(n)),
+      children: steps.map((n, i) => /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
+          role: "radio",
+          "aria-label": `${n} of ${max}`,
+          "aria-checked": n === current,
+          tabIndex: i === tabbable ? 0 : -1,
+          onClick: () => setValue(n === current ? null : n),
+          children: "\u2605"
+        },
+        n
+      ))
+    }
+  ) });
 }
 function LinearScale({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
@@ -1041,21 +1177,47 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
   const min = scale.min ?? 1;
   const max = scale.max ?? 10;
   const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i);
+  const current = typeof value === "number" ? value : null;
+  const tabbable = rovingIndex(steps, current);
+  const hasLabels = Boolean(scale.minLabel || scale.maxLabel);
+  const minLabelId = `${ids.inputId}-min`;
+  const maxLabelId = `${ids.inputId}-max`;
+  const describedBy = [
+    scale.minLabel ? minLabelId : null,
+    scale.maxLabel ? maxLabelId : null,
+    field.description ? ids.descriptionId : null,
+    error ? ids.errorId : null
+  ].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ jsxs4(FieldShell, { field, error, ids, children: [
-    /* @__PURE__ */ jsx4("div", { className: "fillo-scale", role: "group", "aria-label": field.label, ...fieldAria(field, error, ids), children: steps.map((n) => /* @__PURE__ */ jsx4(
-      "button",
+    /* @__PURE__ */ jsx4(
+      "div",
       {
-        type: "button",
-        className: `fillo-scale-step${value === n ? " fillo-scale-step--active" : ""}`,
-        "aria-pressed": value === n,
-        onClick: () => setValue(value === n ? null : n),
-        children: n
-      },
-      n
-    )) }),
-    (scale.minLabel || scale.maxLabel) && /* @__PURE__ */ jsxs4("div", { className: "fillo-scale-labels", children: [
-      /* @__PURE__ */ jsx4("span", { children: scale.minLabel }),
-      /* @__PURE__ */ jsx4("span", { children: scale.maxLabel })
+        className: "fillo-scale",
+        role: "radiogroup",
+        "aria-labelledby": ids.labelId,
+        "aria-invalid": error ? true : void 0,
+        "aria-required": field.required ? true : void 0,
+        "aria-describedby": describedBy,
+        onKeyDown: (e) => radiogroupKeyDown(e, steps, current, (n) => setValue(n)),
+        children: steps.map((n, i) => /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: `fillo-scale-step${value === n ? " fillo-scale-step--active" : ""}`,
+            role: "radio",
+            "aria-label": String(n),
+            "aria-checked": value === n,
+            tabIndex: i === tabbable ? 0 : -1,
+            onClick: () => setValue(value === n ? null : n),
+            children: n
+          },
+          n
+        ))
+      }
+    ),
+    hasLabels && /* @__PURE__ */ jsxs4("div", { className: "fillo-scale-labels", children: [
+      /* @__PURE__ */ jsx4("span", { id: minLabelId, children: scale.minLabel }),
+      /* @__PURE__ */ jsx4("span", { id: maxLabelId, children: scale.maxLabel })
     ] })
   ] });
 }
@@ -1117,20 +1279,30 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
       /* @__PURE__ */ jsx4("th", {}),
       matrix.columns.map((col) => /* @__PURE__ */ jsx4("th", { scope: "col", children: col.label }, col.id))
     ] }) }),
-    /* @__PURE__ */ jsx4("tbody", { children: matrix.rows.map((row) => /* @__PURE__ */ jsxs4("tr", { children: [
-      /* @__PURE__ */ jsx4("th", { scope: "row", children: row.label }),
-      matrix.columns.map((col) => /* @__PURE__ */ jsx4("td", { children: /* @__PURE__ */ jsx4(
-        "input",
-        {
-          type: "radio",
-          className: "fillo-option-input",
-          name: `${ids.name}-${row.id}`,
-          "aria-label": `${row.label}: ${col.label}`,
-          checked: answers[row.id] === col.id,
-          onChange: () => setValue({ ...answers, [row.id]: col.id })
-        }
-      ) }, col.id))
-    ] }, row.id)) })
+    /* @__PURE__ */ jsx4("tbody", { children: matrix.rows.map((row) => {
+      const rowLabelId = `${ids.inputId}-${row.id}`;
+      const answered = answers[row.id] !== void 0;
+      const rowInvalid = Boolean(error) && field.required && !answered;
+      return (
+        // Each row is its own radiogroup, labelled by the row question.
+        /* @__PURE__ */ jsxs4("tr", { role: "radiogroup", "aria-labelledby": rowLabelId, children: [
+          /* @__PURE__ */ jsx4("th", { scope: "row", id: rowLabelId, children: row.label }),
+          matrix.columns.map((col) => /* @__PURE__ */ jsx4("td", { children: /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "radio",
+              className: "fillo-option-input",
+              name: `${ids.name}-${row.id}`,
+              "aria-label": `${row.label}: ${col.label}`,
+              "aria-required": field.required ? true : void 0,
+              "aria-invalid": rowInvalid ? true : void 0,
+              checked: answers[row.id] === col.id,
+              onChange: () => setValue({ ...answers, [row.id]: col.id })
+            }
+          ) }, col.id))
+        ] }, row.id)
+      );
+    }) })
   ] }) }) });
 }
 function Hidden() {
@@ -1183,14 +1355,39 @@ function shouldAutoSubmit(field, value, api) {
         return false;
     }
   })();
-  return hasDiscreteAnswer && validateResponse(api.form, { ...api.data, [field.id]: value }).ok;
+  if (!hasDiscreteAnswer) return false;
+  if (value === api.data[field.id]) return false;
+  return validateResponse(api.form, { ...api.data, [field.id]: value }).ok;
 }
-function BlockRenderer({
-  block,
-  api,
-  components,
-  customComponents
-}) {
+function blockHasPiping(block) {
+  const has = (s) => typeof s === "string" && s.includes("{{");
+  switch (block.kind) {
+    case "heading":
+    case "paragraph":
+      return has(block.text);
+    case "divider":
+      return false;
+    default:
+      return has(block.label) || has(block.description);
+  }
+}
+function blockPropsEqual(prev, next) {
+  if (prev.block !== next.block || prev.components !== next.components || prev.customComponents !== next.customComponents) {
+    return false;
+  }
+  const id = next.block.id;
+  if (prev.api.data[id] !== next.api.data[id]) return false;
+  if (prev.api.errors[id] !== next.api.errors[id]) return false;
+  const needsWiderState = next.block.kind === "custom" || blockHasPiping(prev.block) || blockHasPiping(next.block);
+  if (needsWiderState && prev.api.data !== next.api.data) return false;
+  if (next.api.form.settings.submitMode === "auto") {
+    if (prev.api.data !== next.api.data || prev.api.status !== next.api.status || prev.api.uploading !== next.api.uploading || prev.api.isLastPage !== next.api.isLastPage) {
+      return false;
+    }
+  }
+  return true;
+}
+function BlockRendererInner({ block, api, components, customComponents }) {
   block = pipeBlock(block, api.data, api.form);
   const ids = useFilloFieldIds(block.id);
   if (!isField(block)) return /* @__PURE__ */ jsx4(ContentRenderer, { block });
@@ -1224,6 +1421,7 @@ function BlockRenderer({
     }
   );
 }
+var BlockRenderer = memo(BlockRendererInner, blockPropsEqual);
 function FormField({
   id,
   components,
@@ -1276,6 +1474,15 @@ function badgeUrl(href) {
   url.searchParams.set("utm_source", "form_badge");
   return url.toString();
 }
+function focusFirstInvalid(formEl) {
+  if (!formEl || typeof window === "undefined") return;
+  const run = () => {
+    const target = formEl.querySelector('[aria-invalid="true"]');
+    target?.focus?.();
+  };
+  if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
+  else setTimeout(run, 0);
+}
 function isAutoSubmitBlock(block) {
   return isField2(block) && (block.kind === "select" || block.kind === "dropdown" || block.kind === "checkbox" || block.kind === "rating" || block.kind === "linear_scale");
 }
@@ -1284,7 +1491,7 @@ function needsExplicitSubmit(blocks) {
 }
 function FilloForm(props) {
   const { form, formId } = props;
-  const client = useMemo2(
+  const client = useMemo4(
     () => props.client ?? (formId ? createClient() : void 0),
     [props.client, formId]
   );
@@ -1320,7 +1527,7 @@ function FilloForm(props) {
     };
   }, [needsFetch, client, formId, onError]);
   const rawSchema = inlineSchema ?? fetched;
-  const normalized = useMemo2(() => rawSchema ? normalizeFormSchema(rawSchema) : null, [rawSchema]);
+  const normalized = useMemo4(() => rawSchema ? normalizeFormSchema(rawSchema) : null, [rawSchema]);
   const schema = normalized?.ok ? normalized.schema : null;
   const theme = props.theme ?? codeForm?.theme ?? fetchedTheme ?? void 0;
   if (normalized && !normalized.ok) {
@@ -1396,7 +1603,7 @@ function ResolvedForm(props) {
     skipValidation: props.skipValidation,
     getHoneypot: () => hpRef.current
   });
-  const themed = useMemo2(() => themeProps(theme), [theme]);
+  const themed = useMemo4(() => themeProps(theme), [theme]);
   const settings = schema.settings;
   const submitted = api.status === "submitted";
   useEffect7(() => {
@@ -1426,8 +1633,12 @@ function ResolvedForm(props) {
       noValidate: true,
       onSubmit: (e) => {
         e.preventDefault();
-        if (api.isLastPage) void api.submit();
-        else api.next();
+        const formEl = e.currentTarget;
+        if (api.isLastPage) void api.submit().then(() => focusFirstInvalid(formEl));
+        else {
+          api.next();
+          focusFirstInvalid(formEl);
+        }
       },
       children: [
         !props.client && !props.skipValidation && isDevEnv() && /* @__PURE__ */ jsx5(DevNoClientNotice, {}),
@@ -1498,15 +1709,15 @@ function ResolvedForm(props) {
 }
 
 // src/provider.tsx
-import { useId as useId3, useMemo as useMemo3 } from "react";
+import { useId as useId3, useMemo as useMemo5 } from "react";
 import { FilloError as FilloError3, normalizeFormSchema as normalizeFormSchema2 } from "@usefillo/core";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function FilloProvider({ children, form, formId, client, ...options }) {
   const instanceId = useId3().replace(/:/g, "");
   const codeForm = isCodeForm2(form) ? form : null;
   const rawSchema = codeForm ? codeForm.schema : form;
-  const schemaKey = JSON.stringify(rawSchema);
-  const normalized = useMemo3(() => normalizeFormSchema2(rawSchema), [rawSchema, schemaKey]);
+  const schemaKey = useMemo5(() => JSON.stringify(rawSchema), [rawSchema]);
+  const normalized = useMemo5(() => normalizeFormSchema2(rawSchema), [rawSchema, schemaKey]);
   if (!normalized.ok) {
     throw new FilloError3(`This form could not be rendered: ${normalized.error}`, 422);
   }

package/dist/styles.css

@@ -328,6 +328,11 @@
   }
   .fillo-star:hover { transform: scale(1.15); }
   .fillo-star--active { color: var(--fillo-primary); }
+  .fillo-star:focus-visible {
+    outline: none;
+    border-radius: calc(var(--fillo-radius) * 0.5);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 30%, transparent);
+  }
 
   /* ---------- Linear scale ---------- */
   /* Steps share one row and shrink to fit — an 11-step NPS scale must never
@@ -348,6 +353,11 @@
     transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
   }
   .fillo-scale-step:hover { border-color: var(--fillo-primary); }
+  .fillo-scale-step:focus-visible {
+    outline: none;
+    border-color: var(--fillo-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
+  }
   .fillo-scale-step--active {
     background: var(--fillo-primary);
     border-color: var(--fillo-primary);
@@ -450,6 +460,21 @@
   }
   .fillo-signature-clear:hover { color: var(--fillo-error); border-color: var(--fillo-error); }
 
+  /* Type-to-sign: the keyboard/screen-reader path under the canvas. */
+  .fillo-signature-type {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    margin-top: 0.55rem;
+  }
+  .fillo-signature-type-label {
+    color: var(--fillo-muted);
+    font-size: 0.8rem;
+  }
+  .fillo-signature-type-input {
+    margin-top: 0;
+  }
+
   /* ---------- File upload ---------- */
   .fillo-dropzone {
     display: flex;
@@ -469,6 +494,11 @@
     border-color: var(--fillo-primary);
     background: color-mix(in srgb, var(--fillo-primary) 4%, var(--fillo-control-bg));
   }
+  .fillo-dropzone:focus-visible {
+    outline: none;
+    border-color: var(--fillo-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
+  }
   .fillo-dropzone--disabled { cursor: not-allowed; opacity: 0.6; }
   .fillo-dropzone-title { font-weight: 550; font-size: 0.95rem; }
   .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82rem; }
@@ -526,6 +556,10 @@
   }
   .fillo-button:active { transform: translateY(1px); }
   .fillo-button:disabled { opacity: 0.55; cursor: not-allowed; }
+  .fillo-button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 30%, transparent);
+  }
   .fillo-button--primary { background: var(--fillo-primary); color: var(--fillo-primary-contrast); }
   .fillo-button--ghost { background: transparent; color: var(--fillo-text); border-color: var(--fillo-border); }
 
@@ -574,6 +608,20 @@
     pointer-events: none;
   }
 
+  /* Visually hidden but exposed to assistive tech — for aria-live narration. */
+  .fillo-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
   /* ---------- Loading skeleton ---------- */
   .fillo-form--loading { gap: 0.9rem; }
   .fillo-skeleton {
@@ -588,6 +636,22 @@
     to { background-position: -200% 0; }
   }
 
+  /* Respect a reduced-motion preference: drop transitions, the press nudge,
+     the rating hover scale, and the skeleton shimmer. */
+  @media (prefers-reduced-motion: reduce) {
+    .fillo-form *,
+    .fillo-form *::before,
+    .fillo-form *::after {
+      animation-duration: 0.001ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.001ms !important;
+      scroll-behavior: auto !important;
+    }
+    .fillo-button:active { transform: none; }
+    .fillo-star:hover { transform: none; }
+    .fillo-skeleton { animation: none; }
+  }
+
   /* ---------- "Powered by Fillo" badge ---------- */
   .fillo-powered {
     display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefillo/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Headless React components for embedding Fillo forms natively in your product.",
   "license": "MIT",
   "keywords": [
@@ -32,7 +32,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@usefillo/core": "^0.4.0"
+    "@usefillo/core": "^0.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",