diff --git a/desktop/public/formplayer-host-stub.js b/desktop/public/formplayer-host-stub.js
index df3518a0a..c284f4060 100644
--- a/desktop/public/formplayer-host-stub.js
+++ b/desktop/public/formplayer-host-stub.js
@@ -34,4 +34,43 @@
       }
     },
   };
+
+  /**
+   * ODE Desktop: deliver bridge *_response to pending Formulus promises without
+   * relying on postMessage from the outer shell (unreliable for srcdoc iframes in WebView2).
+   */
+  function deliverBridgeResponseBody(body) {
+    if (!body || !body.type || !body.messageId) {
+      return;
+    }
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: JSON.stringify(body),
+      }),
+    );
+  }
+
+  window.__odeFormplayerDeliverBridgeResponse = function (
+    requestType,
+    messageId,
+    payload,
+  ) {
+    var responseType = requestType + '_response';
+    var body = { type: responseType, messageId: messageId };
+    if (payload && typeof payload === 'object') {
+      if ('result' in payload) body.result = payload.result;
+      if ('error' in payload) body.error = payload.error;
+    }
+    deliverBridgeResponseBody(body);
+  };
+
+  /** Same-origin broadcast fallback when the outer shell cannot postMessage into srcdoc iframes (WebView2). */
+  if (typeof BroadcastChannel !== 'undefined') {
+    var bridgeResponseChannel = new BroadcastChannel(
+      'ode-formplayer-bridge-response',
+    );
+    bridgeResponseChannel.onmessage = function (event) {
+      deliverBridgeResponseBody(event.data);
+    };
+  }
 })();
diff --git a/desktop/public/formulus-injection.js b/desktop/public/formulus-injection.js
index 4a93337c0..5e5f43381 100644
--- a/desktop/public/formulus-injection.js
+++ b/desktop/public/formulus-injection.js
@@ -235,8 +235,6 @@
         const messageId =
           'msg_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
 
-        // Add response handler for methods that return values
-
         const callback = event => {
           try {
             let data;
diff --git a/desktop/src/components/CustomAppEmbed.tsx b/desktop/src/components/CustomAppEmbed.tsx
index ac1e5b3b4..9542d418e 100644
--- a/desktop/src/components/CustomAppEmbed.tsx
+++ b/desktop/src/components/CustomAppEmbed.tsx
@@ -72,6 +72,8 @@ export type CustomAppEmbedProps = {
   /** Workspace-relative path to `index.html`; defaults from {@link mode}. */
   indexRelativePath?: string;
   loadingLabel?: string;
+  /** Fired when the iframe document loads (bridge routing in WebView2). */
+  onContentWindowReady?: (contentWindow: Window | null) => void;
 };
 
 function defaultIndexRelativePath(mode: CustomAppEmbedMode): string {
@@ -93,10 +95,12 @@ export const CustomAppEmbed = forwardRef<
   HTMLIFrameElement,
   CustomAppEmbedProps
 >(function CustomAppEmbed(
-  { mountKey, mode, indexRelativePath, loadingLabel },
+  { mountKey, mode, indexRelativePath, loadingLabel, onContentWindowReady },
   ref,
 ) {
   const innerRef = useRef<HTMLIFrameElement | null>(null);
+  const onContentWindowReadyRef = useRef(onContentWindowReady);
+  onContentWindowReadyRef.current = onContentWindowReady;
   const setRefs = useCallback(
     (el: HTMLIFrameElement | null) => {
       (innerRef as MutableRefObject<HTMLIFrameElement | null>).current = el;
@@ -149,6 +153,7 @@ export const CustomAppEmbed = forwardRef<
       // hash for routing (HashRouter or path), so `#ode-…` would break the initial route.
       const url = `${indexAssetUrl}?ode=${Date.now()}`;
       el.onload = () => {
+        onContentWindowReadyRef.current?.(el.contentWindow);
         setLoading(false);
       };
       el.src = url;
diff --git a/desktop/src/components/FormplayerEmbed.tsx b/desktop/src/components/FormplayerEmbed.tsx
index e655d2a4d..0b691fb4d 100644
--- a/desktop/src/components/FormplayerEmbed.tsx
+++ b/desktop/src/components/FormplayerEmbed.tsx
@@ -2,10 +2,11 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
-  type MutableRefObject,
 } from 'react';
+import { postFormplayerBridgeReply } from '../lib/formPreviewBridge';
 import type { FormInitData } from '../lib/formplayerHost';
 
 const FORMSPLAYER_INDEX = `${import.meta.env.BASE_URL}formplayer_dist/index.html`;
@@ -40,6 +41,18 @@ export type FormplayerEmbedProps = {
   /** Full `FormInitData` for the embedded formplayer; `null` shows `emptyMessage` only. */
   formInitData: FormInitData | null;
   emptyMessage?: string;
+  /** Fired when the iframe document loads (used to register `contentWindow` for bridge routing). */
+  onContentWindowReady?: (contentWindow: Window | null) => void;
+};
+
+/** Imperative handle for bridge delivery into the iframe document (WebView2-safe). */
+export type FormplayerEmbedHandle = {
+  getIframe: () => HTMLIFrameElement | null;
+  deliverBridgeResponse: (
+    requestType: string,
+    messageId: string,
+    payload: { result?: unknown; error?: string },
+  ) => void;
 };
 
 /**
@@ -48,27 +61,40 @@ export type FormplayerEmbedProps = {
  * base href) so Finalize / `submitObservation` and extension APIs work.
  */
 export const FormplayerEmbed = forwardRef<
-  HTMLIFrameElement,
+  FormplayerEmbedHandle,
   FormplayerEmbedProps
 >(function FormplayerEmbed(
   {
     formInitData,
     emptyMessage = 'Select a form type and apply params/saved JSON to load the preview.',
+    onContentWindowReady,
   },
   ref,
 ) {
   const innerRef = useRef<HTMLIFrameElement | null>(null);
   const timeoutRef = useRef<number | null>(null);
-  const setRefs = useCallback(
-    (el: HTMLIFrameElement | null) => {
-      (innerRef as MutableRefObject<HTMLIFrameElement | null>).current = el;
-      if (typeof ref === 'function') {
-        ref(el);
-      } else if (ref) {
-        (ref as MutableRefObject<HTMLIFrameElement | null>).current = el;
-      }
-    },
-    [ref],
+  const onContentWindowReadyRef = useRef(onContentWindowReady);
+  onContentWindowReadyRef.current = onContentWindowReady;
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getIframe: () => innerRef.current,
+      deliverBridgeResponse: (requestType, messageId, payload) => {
+        const win = innerRef.current?.contentWindow ?? null;
+        if (!win) {
+          return;
+        }
+        postFormplayerBridgeReply(
+          innerRef.current,
+          requestType,
+          messageId,
+          payload,
+          win,
+        );
+      },
+    }),
+    [],
   );
 
   const [error, setError] = useState<string | null>(null);
@@ -122,6 +148,7 @@ export const FormplayerEmbed = forwardRef<
           window.clearTimeout(timeoutRef.current);
           timeoutRef.current = null;
         }
+        onContentWindowReadyRef.current?.(el.contentWindow);
         setLoading(false);
       };
       // WebView2 can behave inconsistently with blob: + module scripts in packaged apps.
@@ -160,7 +187,9 @@ export const FormplayerEmbed = forwardRef<
       {error ? <p className="notice warn">{error}</p> : null}
       {loading && !error ? <p className="muted">Loading formplayer…</p> : null}
       <iframe
-        ref={setRefs}
+        ref={el => {
+          innerRef.current = el;
+        }}
         title="Formplayer preview"
         className="formplayer-embed-frame"
       />
diff --git a/desktop/src/lib/__tests__/formPreviewBridge.test.ts b/desktop/src/lib/__tests__/formPreviewBridge.test.ts
index e9f7734c8..307432534 100644
--- a/desktop/src/lib/__tests__/formPreviewBridge.test.ts
+++ b/desktop/src/lib/__tests__/formPreviewBridge.test.ts
@@ -161,6 +161,7 @@ describe('handleFormPreviewBridgeMessage', () => {
     expect(postPrimary).not.toHaveBeenCalled();
     expect(defer).toHaveBeenCalledWith({
       parentIframe: primaryIframe,
+      parentContentWindow: primaryCw,
       messageId: 'op-def',
       formType: 'child_form',
       params: { a: 1 },
@@ -478,4 +479,30 @@ describe('postFormplayerBridgeReply', () => {
     const payload = JSON.parse(postMessage.mock.calls[0][0] as string);
     expect(payload.type).toBe('getThemeMode_response');
   });
+
+  it('delivers via __odeFormplayerDeliverBridgeResponse and postMessage', () => {
+    const postMessage = vi.fn();
+    const deliver = vi.fn();
+    const cw = {
+      postMessage,
+      __odeFormplayerDeliverBridgeResponse: deliver,
+    } as unknown as Window;
+    const iframe = { contentWindow: cw } as HTMLIFrameElement;
+
+    postFormplayerBridgeReply(
+      iframe,
+      'openFormplayer',
+      'msg-parent',
+      { result: { status: 'form_submitted', formData: { a: 1 } } },
+      cw,
+    );
+
+    expect(deliver).toHaveBeenCalledWith('openFormplayer', 'msg-parent', {
+      result: { status: 'form_submitted', formData: { a: 1 } },
+    });
+    expect(postMessage).toHaveBeenCalledTimes(1);
+    const payload = JSON.parse(postMessage.mock.calls[0][0] as string);
+    expect(payload.type).toBe('openFormplayer_response');
+    expect(payload.messageId).toBe('msg-parent');
+  });
 });
diff --git a/desktop/src/lib/__tests__/formPreviewSubObservationBridge.test.ts b/desktop/src/lib/__tests__/formPreviewSubObservationBridge.test.ts
new file mode 100644
index 000000000..75c80e1b7
--- /dev/null
+++ b/desktop/src/lib/__tests__/formPreviewSubObservationBridge.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { FormplayerEmbedHandle } from '../../components/FormplayerEmbed';
+import {
+  clearPendingSubObservationOpensForTests,
+  deliverSubObservationCompletion,
+  registerPendingSubObservationOpen,
+} from '../formPreviewSubObservationBridge';
+
+describe('formPreviewSubObservationBridge', () => {
+  it('delivers completion via parent embed handle and content window', () => {
+    clearPendingSubObservationOpensForTests();
+    const postMessage = vi.fn();
+    const deliver = vi.fn();
+    const parentWindow = { postMessage } as unknown as Window;
+    const handle = {
+      getIframe: () => ({ contentWindow: parentWindow }) as HTMLIFrameElement,
+      deliverBridgeResponse: deliver,
+    } satisfies FormplayerEmbedHandle;
+
+    registerPendingSubObservationOpen({
+      parentMessageId: 'msg-1',
+      parentEmbed: handle,
+      parentContentWindow: parentWindow,
+      formType: 'child_form',
+    });
+
+    const ok = deliverSubObservationCompletion('msg-1', {
+      status: 'form_submitted',
+      formType: 'child_form',
+      formData: { k: 'v' },
+    });
+
+    expect(ok).toBe(true);
+    expect(deliver).toHaveBeenCalledWith('openFormplayer', 'msg-1', {
+      result: {
+        status: 'form_submitted',
+        formType: 'child_form',
+        formData: { k: 'v' },
+      },
+    });
+    expect(postMessage).toHaveBeenCalled();
+  });
+});
diff --git a/desktop/src/lib/bundleExtensionLoader.ts b/desktop/src/lib/bundleExtensionLoader.ts
index c004e097b..54e97aaf7 100644
--- a/desktop/src/lib/bundleExtensionLoader.ts
+++ b/desktop/src/lib/bundleExtensionLoader.ts
@@ -1,5 +1,7 @@
-import { bundleFormsRel } from './bundleLayout';
-import type { FormInitData } from './formplayerHost';
+import { convertFileSrc } from '@tauri-apps/api/core';
+import { join } from '@tauri-apps/api/path';
+import { bundleFormsRel, bundleSegment } from './bundleLayout';
+import type { ExtensionMetadata, FormInitData } from './formplayerHost';
 import { tauriClient } from './tauriClient';
 
 export type ExtensionFunctionShape = {
@@ -96,8 +98,8 @@ function mergeLayer(
 export function formplayerExtensionsFromMerged(
   merged: ReturnType<typeof normalizeJson>,
   basePath: string,
-): NonNullable<FormInitData['extensions']> {
-  const functions: Record<string, unknown> = {};
+): ExtensionMetadata {
+  const functions: NonNullable<ExtensionMetadata['functions']> = {};
   for (const [key, func] of Object.entries(merged.functions)) {
     const modulePath = (func.module || '').replace(/^\/+/, '');
     functions[key] = {
@@ -106,7 +108,7 @@ export function formplayerExtensionsFromMerged(
       export: func.export,
     };
   }
-  const renderers: Record<string, unknown> = {};
+  const renderers: NonNullable<ExtensionMetadata['renderers']> = {};
   for (const [key, r] of Object.entries(merged.renderers)) {
     const modulePath = (r.module || '').replace(/^\/+/, '');
     renderers[key] = {
@@ -173,6 +175,27 @@ export async function loadBundleFormplayerExtensions(
   if (hasExtensionContent) {
     const basePath = await tauriClient.getActiveBundleFormsFileBaseUrl();
     extensions = formplayerExtensionsFromMerged(merged, basePath);
+
+    const ws = await tauriClient.getWorkspace();
+    if (ws && extensions?.functions) {
+      const segment = bundleSegment(developerMode);
+      const gbmisAbs = await join(
+        ws,
+        'bundles',
+        segment,
+        'app',
+        'extensions',
+        'gbmis.js',
+      );
+      const gbmisUrl = convertFileSrc(gbmisAbs);
+      for (const fn of Object.values(extensions.functions)) {
+        const meta = fn as Record<string, unknown>;
+        const modulePath = String(meta.module ?? '');
+        if (modulePath.includes('gbmis.js')) {
+          meta.module = gbmisUrl;
+        }
+      }
+    }
   } else {
     extensions = undefined;
   }
diff --git a/desktop/src/lib/formPreviewBridge.ts b/desktop/src/lib/formPreviewBridge.ts
index 60be09a23..b5602003c 100644
--- a/desktop/src/lib/formPreviewBridge.ts
+++ b/desktop/src/lib/formPreviewBridge.ts
@@ -35,6 +35,10 @@ import type { ObservationRecord } from '../types/domain';
 /** Matches `FORMULUS_INTERFACE_VERSION` in formplayer (`FormulusInterfaceDefinition.ts`). */
 export const FORM_PREVIEW_FORMULUS_INTERFACE_VERSION = '1.2.1';
 
+/** Must match `formplayer-host-stub.js` — delivers `*_response` to pending Formulus promises in iframes. */
+export const FORMPLAYER_BRIDGE_RESPONSE_CHANNEL =
+  'ode-formplayer-bridge-response';
+
 /** Prefix for stub `error` strings so logs and issues are easy to grep. */
 export const DESKTOP_FORM_PREVIEW_PREFIX = 'ODE Desktop form preview';
 
@@ -82,6 +86,8 @@ export type FinalizeRequest =
 /** Payload when formplayer requests a nested sub-observation session (`openFormplayer` + `subObservationMode`). */
 export type FormPreviewDeferOpenSubObservationPayload = {
   parentIframe: HTMLIFrameElement;
+  /** Parent formplayer `contentWindow` from the bridge message (`event.source`). */
+  parentContentWindow: Window | null;
   messageId: string;
   formType: string;
   params: Record<string, unknown>;
@@ -152,17 +158,60 @@ function resolveBridgeReplyIframe(
   return primary;
 }
 
+function buildBridgeResponseBody(
+  requestType: string,
+  messageId: string,
+  payload: { result?: unknown; error?: string },
+): Record<string, unknown> {
+  return { type: `${requestType}_response`, messageId, ...payload };
+}
+
 export function postFormplayerBridgeReply(
   iframe: HTMLIFrameElement | null,
   requestType: string,
   messageId: string,
   payload: { result?: unknown; error?: string },
+  /** Prefer a window captured on iframe load (srcdoc / WebView2). */
+  targetWindow?: Window | null,
 ): void {
-  const responseType = `${requestType}_response`;
-  iframe?.contentWindow?.postMessage(
-    JSON.stringify({ type: responseType, messageId, ...payload }),
-    '*',
-  );
+  const body = buildBridgeResponseBody(requestType, messageId, payload);
+  const serialized = JSON.stringify(body);
+  const win = targetWindow ?? iframe?.contentWindow ?? null;
+
+  if (win) {
+    try {
+      const deliver = (
+        win as Window & {
+          __odeFormplayerDeliverBridgeResponse?: (
+            requestType: string,
+            messageId: string,
+            payload: { result?: unknown; error?: string },
+          ) => void;
+        }
+      ).__odeFormplayerDeliverBridgeResponse;
+      if (typeof deliver === 'function') {
+        deliver(requestType, messageId, payload);
+      }
+    } catch {
+      // cross-origin or inaccessible — fall back below
+    }
+
+    try {
+      win.postMessage(serialized, '*');
+    } catch {
+      // ignore — BroadcastChannel may still reach the iframe
+    }
+  }
+
+  try {
+    if (typeof BroadcastChannel !== 'undefined') {
+      const channel = new BroadcastChannel(FORMPLAYER_BRIDGE_RESPONSE_CHANNEL);
+      channel.postMessage(body);
+      channel.close();
+    }
+  } catch {
+    // optional fallback
+  }
 }
 
 function stubReason(detail: string): { error: string } {
@@ -337,11 +386,14 @@ export async function handleFormPreviewBridgeMessage(
         const subObservationMode = Boolean(options?.subObservationMode);
 
         if (subObservationMode && ctx.onDeferOpenSubObservation) {
-          const parentIframe =
-            resolveBridgeReplyIframe(eventSource, ctx) ?? ctx.iframe;
+          const parentIframe = resolveBridgeReplyIframe(eventSource, ctx);
           if (parentIframe) {
             ctx.onDeferOpenSubObservation({
               parentIframe,
+              parentContentWindow:
+                eventSource != null && typeof eventSource === 'object'
+                  ? (eventSource as Window)
+                  : null,
               messageId,
               formType,
               params,
@@ -351,6 +403,13 @@ export async function handleFormPreviewBridgeMessage(
             });
             return;
           }
+          reply(
+            'openFormplayer',
+            stubReason(
+              'Could not identify the parent formplayer iframe for nested sub-observation open.',
+            ),
+          );
+          return;
         }
 
         if (ctx.onOpenFormplayerNavigate) {
diff --git a/desktop/src/lib/formPreviewSubObservationBridge.ts b/desktop/src/lib/formPreviewSubObservationBridge.ts
new file mode 100644
index 000000000..2234977c6
--- /dev/null
+++ b/desktop/src/lib/formPreviewSubObservationBridge.ts
@@ -0,0 +1,83 @@
+/**
+ * Tracks deferred `openFormplayer` (subObservationMode) sessions in the ODE Desktop shell.
+ *
+ * Formulus resolves nested completion by injecting `postMessage` into the *parent* WebView.
+ * ODE Desktop uses stacked srcdoc iframes; delivery must target the parent embed's live
+ * `contentWindow` via {@link FormplayerEmbedHandle}, not a captured HTMLIFrameElement ref.
+ */
+
+import type { FormplayerEmbedHandle } from '../components/FormplayerEmbed';
+import { postFormplayerBridgeReply } from './formPreviewBridge';
+
+export type PendingSubObservationOpen = {
+  parentMessageId: string;
+  parentEmbed: FormplayerEmbedHandle | null;
+  /** Parent iframe `contentWindow` captured when the nested open was deferred. */
+  parentContentWindow: Window | null;
+  formType: string;
+};
+
+const pendingOpens = new Map<string, PendingSubObservationOpen>();
+
+export function registerPendingSubObservationOpen(
+  entry: PendingSubObservationOpen,
+): void {
+  pendingOpens.set(entry.parentMessageId, entry);
+}
+
+export function dropPendingSubObservationOpen(messageId: string): void {
+  pendingOpens.delete(messageId);
+}
+
+export function deliverSubObservationCompletion(
+  messageId: string,
+  completion: Record<string, unknown>,
+): boolean {
+  const entry = pendingOpens.get(messageId);
+  if (!entry) {
+    return false;
+  }
+  pendingOpens.delete(messageId);
+
+  const payload = { result: completion };
+
+  entry.parentEmbed?.deliverBridgeResponse(
+    'openFormplayer',
+    messageId,
+    payload,
+  );
+
+  const send = () => {
+    if (entry.parentContentWindow) {
+      postFormplayerBridgeReply(
+        entry.parentEmbed?.getIframe() ?? null,
+        'openFormplayer',
+        messageId,
+        payload,
+        entry.parentContentWindow,
+      );
+    }
+  };
+  send();
+  queueMicrotask(send);
+  requestAnimationFrame(send);
+  window.setTimeout(send, 0);
+  window.setTimeout(send, 50);
+
+  return true;
+}
+
+export function deliverSubObservationCancelled(
+  messageId: string,
+  formType: string,
+): boolean {
+  return deliverSubObservationCompletion(messageId, {
+    status: 'cancelled',
+    formType,
+  });
+}
+
+/** @internal test helper */
+export function clearPendingSubObservationOpensForTests(): void {
+  pendingOpens.clear();
+}
diff --git a/desktop/src/lib/formplayerHost.ts b/desktop/src/lib/formplayerHost.ts
index 91d8b5661..6f380f5d1 100644
--- a/desktop/src/lib/formplayerHost.ts
+++ b/desktop/src/lib/formplayerHost.ts
@@ -3,6 +3,30 @@
  * Full WebView host wiring is tracked in the ODE Desktop plan.
  */
 
+/** Mirrors `FormulusInterfaceDefinition.ExtensionMetadata`. */
+export interface ExtensionMetadata {
+  definitions?: Record<string, unknown>;
+  functions?: Record<
+    string,
+    {
+      name: string;
+      module: string;
+      export?: string;
+    }
+  >;
+  renderers?: Record<
+    string,
+    {
+      name: string;
+      format: string;
+      module: string;
+      tester?: string;
+      renderer?: string;
+    }
+  >;
+  basePath?: string;
+}
+
 /** Mirrors `FormulusInterfaceDefinition.FormInitData` for the embedded formplayer host. */
 export interface FormInitData {
   formType: string;
@@ -17,7 +41,7 @@ export interface FormInitData {
   skipFinalize?: boolean;
   /** Skip DraftSelector when the host orchestrates the session. */
   skipDraftSelection?: boolean;
-  extensions?: unknown;
+  extensions?: ExtensionMetadata;
   customQuestionTypes?: unknown;
 }
 
diff --git a/desktop/src/lib/iframeMessageSource.ts b/desktop/src/lib/iframeMessageSource.ts
new file mode 100644
index 000000000..21b1a4b3b
--- /dev/null
+++ b/desktop/src/lib/iframeMessageSource.ts
@@ -0,0 +1,25 @@
+/**
+ * WebKit / WCO (Tauri): `MessageEvent.source` may not be strictly `===` to
+ * `iframe.contentWindow`, and `instanceof Window` can be false for iframe globals.
+ * `window.frameElement === iframe` identifies the embedding element reliably for same-origin frames.
+ */
+export function messageSourceMatchesIframe(
+  source: Window,
+  iframe: HTMLIFrameElement | null | undefined,
+  registeredContentWindow?: Window | null,
+): boolean {
+  if (registeredContentWindow && source === registeredContentWindow) {
+    return true;
+  }
+  if (!iframe) {
+    return false;
+  }
+  try {
+    if (iframe.contentWindow === source) {
+      return true;
+    }
+    return source.frameElement === iframe;
+  } catch {
+    return false;
+  }
+}
diff --git a/desktop/src/pages/FormPreviewPage.tsx b/desktop/src/pages/FormPreviewPage.tsx
index c1be7171c..317745108 100644
--- a/desktop/src/pages/FormPreviewPage.tsx
+++ b/desktop/src/pages/FormPreviewPage.tsx
@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { FormFinalizeDialog } from '../components/FormFinalizeDialog';
-import { FormplayerEmbed } from '../components/FormplayerEmbed';
+import {
+  FormplayerEmbed,
+  type FormplayerEmbedHandle,
+} from '../components/FormplayerEmbed';
 import {
   buildFormPreviewInit,
   inferObservationIdFromSavedData,
@@ -12,44 +15,31 @@ import { useDeveloperMode } from '../hooks/useDeveloperMode';
 import type { FinalizeRequest } from '../lib/formPreviewBridge';
 import {
   handleFormPreviewBridgeMessage,
-  postFormplayerBridgeReply,
   type FormPreviewDeferOpenSubObservationPayload,
 } from '../lib/formPreviewBridge';
 import type { FormPreviewEditState } from '../lib/formPreviewNavigation';
 import { tauriClient } from '../lib/tauriClient';
 import type { FormInitData } from '../lib/formplayerHost';
 import type { ActiveBundleFormEntry, BundleFormSpec } from '../types/domain';
+import { messageSourceMatchesIframe } from '../lib/iframeMessageSource';
+import {
+  deliverSubObservationCancelled,
+  deliverSubObservationCompletion,
+  dropPendingSubObservationOpen,
+  registerPendingSubObservationOpen,
+} from '../lib/formPreviewSubObservationBridge';
 
 const DEFAULT_JSON = '{}';
 
-/**
- * WebKit / WCO (Tauri): `MessageEvent.source` may not be strictly `===` to
- * `iframe.contentWindow`, and `instanceof Window` can be false for iframe globals.
- * `window.frameElement === iframe` identifies the embedding element reliably for same-origin frames.
- */
-function messageSourceMatchesIframe(
-  source: Window,
-  iframe: HTMLIFrameElement | null | undefined,
-): boolean {
-  if (!iframe) {
-    return false;
-  }
-  try {
-    if (iframe.contentWindow === source) {
-      return true;
-    }
-    return source.frameElement === iframe;
-  } catch {
-    return false;
-  }
-}
-
 type LocationState = {
   formPreviewEdit?: FormPreviewEditState;
 };
 
 type NestedSubObservationSession = {
   parentIframe: HTMLIFrameElement;
+  parentEmbed: FormplayerEmbedHandle | null;
+  /** Parent iframe `contentWindow` captured when the nested open was deferred. */
+  parentContentWindow: Window | null;
   parentMessageId: string;
   formType: string;
   /** Null while bundle init is loading */
@@ -81,7 +71,11 @@ export function FormPreviewPage() {
 
   const [formInitData, setFormInitData] = useState<FormInitData | null>(null);
 
-  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const iframeRef = useRef<FormplayerEmbedHandle>(null);
+  const rootContentWindowRef = useRef<Window | null>(null);
+  const nestedEmbedByMessageIdRef = useRef<Map<string, FormplayerEmbedHandle>>(
+    new Map(),
+  );
   const finalizeResolverRef = useRef<
     ((v: { result?: string; error?: string }) => void) | null
   >(null);
@@ -95,11 +89,51 @@ export function FormPreviewPage() {
   const nestedIframeByMessageIdRef = useRef<
     Map<string, HTMLIFrameElement | null>
   >(new Map());
+  const nestedContentWindowByMessageIdRef = useRef<Map<string, Window | null>>(
+    new Map(),
+  );
 
   useEffect(() => {
     nestedSessionsRef.current = nestedSessions;
   }, [nestedSessions]);
 
+  const resolveParentEmbed = useCallback(
+    (source: Window): FormplayerEmbedHandle | null => {
+      const rootHandle = iframeRef.current;
+      const rootIframe = rootHandle?.getIframe() ?? null;
+      if (
+        messageSourceMatchesIframe(
+          source,
+          rootIframe,
+          rootContentWindowRef.current,
+        )
+      ) {
+        return rootHandle;
+      }
+      for (const handle of nestedEmbedByMessageIdRef.current.values()) {
+        const el = handle.getIframe();
+        const cw = el?.contentWindow ?? null;
+        if (messageSourceMatchesIframe(source, el, cw)) {
+          return handle;
+        }
+      }
+      return null;
+    },
+    [],
+  );
+
+  const finishNestedSession = useCallback((parentMessageId: string) => {
+    dropPendingSubObservationOpen(parentMessageId);
+    nestedEmbedByMessageIdRef.current.delete(parentMessageId);
+    nestedIframeByMessageIdRef.current.delete(parentMessageId);
+    nestedContentWindowByMessageIdRef.current.delete(parentMessageId);
+    queueMicrotask(() => {
+      setNestedSessions(prev =>
+        prev.filter(sess => sess.parentMessageId !== parentMessageId),
+      );
+    });
+  }, []);
+
   const loadForms = useCallback(async () => {
     setListLoading(true);
     setListError(null);
@@ -262,31 +296,19 @@ export function FormPreviewPage() {
   }, []);
 
   const dismissTopNestedSession = useCallback(() => {
-    setNestedSessions(prev => {
-      const top = prev[prev.length - 1];
-      if (!top) {
-        return prev;
-      }
-      postFormplayerBridgeReply(
-        top.parentIframe,
-        'openFormplayer',
-        top.parentMessageId,
-        {
-          result: {
-            status: 'cancelled',
-            formType: top.formType,
-          },
-        },
-      );
-      nestedIframeByMessageIdRef.current.delete(top.parentMessageId);
-      return prev.slice(0, -1);
-    });
-  }, []);
+    const top = nestedSessionsRef.current[nestedSessionsRef.current.length - 1];
+    if (!top) {
+      return;
+    }
+    deliverSubObservationCancelled(top.parentMessageId, top.formType);
+    finishNestedSession(top.parentMessageId);
+  }, [finishNestedSession]);
 
   const beginDeferredNestedOpen = useCallback(
     (payload: FormPreviewDeferOpenSubObservationPayload) => {
       const {
         parentIframe,
+        parentContentWindow,
         messageId,
         formType,
         params,
@@ -294,10 +316,22 @@ export function FormPreviewPage() {
         skipFinalize,
         skipDraftSelection,
       } = payload;
+      const parentEmbed =
+        parentContentWindow != null
+          ? resolveParentEmbed(parentContentWindow)
+          : null;
+      registerPendingSubObservationOpen({
+        parentMessageId: messageId,
+        parentEmbed,
+        parentContentWindow,
+        formType,
+      });
       setNestedSessions(prev => [
         ...prev,
         {
           parentIframe,
+          parentEmbed,
+          parentContentWindow,
           parentMessageId: messageId,
           formType,
           initData: null,
@@ -330,21 +364,16 @@ export function FormPreviewPage() {
             ),
           );
         } catch (e) {
-          postFormplayerBridgeReply(parentIframe, 'openFormplayer', messageId, {
-            result: {
-              status: 'error',
-              formType,
-              message: e instanceof Error ? e.message : String(e),
-            },
+          deliverSubObservationCompletion(messageId, {
+            status: 'error',
+            formType,
+            message: e instanceof Error ? e.message : String(e),
           });
-          nestedIframeByMessageIdRef.current.delete(messageId);
-          setNestedSessions(prev =>
-            prev.filter(sess => sess.parentMessageId !== messageId),
-          );
+          finishNestedSession(messageId);
         }
       })();
     },
-    [developerMode],
+    [developerMode, finishNestedSession, resolveParentEmbed],
   );
 
   const tryCompleteNestedSubObservationFinalize = useCallback(
@@ -353,14 +382,25 @@ export function FormPreviewPage() {
       request: FinalizeRequest,
     ): Promise<{ result?: string; error?: string } | null> => {
       const stack = nestedSessionsRef.current;
-      const top = stack[stack.length - 1];
-      if (!top?.initData) {
-        return null;
+      let matchedIndex = -1;
+      for (let i = stack.length - 1; i >= 0; i -= 1) {
+        const sess = stack[i];
+        if (!sess.initData) {
+          continue;
+        }
+        const el = nestedIframeByMessageIdRef.current.get(sess.parentMessageId);
+        const cw = nestedContentWindowByMessageIdRef.current.get(
+          sess.parentMessageId,
+        );
+        if (messageSourceMatchesIframe(eventSource, el, cw)) {
+          matchedIndex = i;
+          break;
+        }
       }
-      const topEl = nestedIframeByMessageIdRef.current.get(top.parentMessageId);
-      if (!messageSourceMatchesIframe(eventSource, topEl)) {
+      if (matchedIndex < 0) {
         return null;
       }
+      const matched = stack[matchedIndex];
 
       const syntheticResult =
         request.kind === 'update' ? request.observationId : crypto.randomUUID();
@@ -369,38 +409,42 @@ export function FormPreviewPage() {
         request.kind === 'update'
           ? {
               status: 'form_updated' as const,
-              formType: top.formType,
+              formType: matched.formType,
               observationId: request.observationId,
               formData: request.finalData,
             }
           : {
               status: 'form_submitted' as const,
-              formType: top.formType,
+              formType: matched.formType,
               formData: request.finalData,
             };
 
-      postFormplayerBridgeReply(
-        top.parentIframe,
-        'openFormplayer',
-        top.parentMessageId,
-        { result: completion },
-      );
-
-      nestedIframeByMessageIdRef.current.delete(top.parentMessageId);
-      setNestedSessions(prev => prev.slice(0, -1));
+      deliverSubObservationCompletion(matched.parentMessageId, completion);
+      finishNestedSession(matched.parentMessageId);
 
       return { result: syntheticResult };
     },
-    [],
+    [finishNestedSession],
   );
 
   const resolveReplyIframe = useCallback((source: Window) => {
-    if (messageSourceMatchesIframe(source, iframeRef.current)) {
-      return iframeRef.current;
+    const rootIframe = iframeRef.current?.getIframe() ?? null;
+    if (
+      messageSourceMatchesIframe(
+        source,
+        rootIframe,
+        rootContentWindowRef.current,
+      )
+    ) {
+      return rootIframe;
     }
-    for (const s of nestedSessionsRef.current) {
+    for (let i = nestedSessionsRef.current.length - 1; i >= 0; i -= 1) {
+      const s = nestedSessionsRef.current[i];
       const el = nestedIframeByMessageIdRef.current.get(s.parentMessageId);
-      if (messageSourceMatchesIframe(source, el)) {
+      const cw = nestedContentWindowByMessageIdRef.current.get(
+        s.parentMessageId,
+      );
+      if (messageSourceMatchesIframe(source, el, cw)) {
         return el ?? null;
       }
     }
@@ -418,7 +462,7 @@ export function FormPreviewPage() {
         return;
       }
       void handleFormPreviewBridgeMessage(e, {
-        iframe: iframeRef.current,
+        iframe: iframeRef.current?.getIframe() ?? null,
         resolveReplyIframe,
         onFinalize,
         onDeferOpenSubObservation: beginDeferredNestedOpen,
@@ -473,10 +517,27 @@ export function FormPreviewPage() {
                 </div>
                 {session.initData ? (
                   <FormplayerEmbed
-                    ref={el => {
-                      const map = nestedIframeByMessageIdRef.current;
-                      if (el) {
-                        map.set(session.parentMessageId, el);
+                    ref={handle => {
+                      const embedMap = nestedEmbedByMessageIdRef.current;
+                      const iframeMap = nestedIframeByMessageIdRef.current;
+                      if (handle) {
+                        embedMap.set(session.parentMessageId, handle);
+                        iframeMap.set(
+                          session.parentMessageId,
+                          handle.getIframe(),
+                        );
+                      } else {
+                        embedMap.delete(session.parentMessageId);
+                        iframeMap.delete(session.parentMessageId);
+                        nestedContentWindowByMessageIdRef.current.delete(
+                          session.parentMessageId,
+                        );
+                      }
+                    }}
+                    onContentWindowReady={cw => {
+                      const map = nestedContentWindowByMessageIdRef.current;
+                      if (cw) {
+                        map.set(session.parentMessageId, cw);
                       } else {
                         map.delete(session.parentMessageId);
                       }
@@ -571,6 +632,9 @@ export function FormPreviewPage() {
         <div className="panel panel-form-preview-embed panel-embed-flush">
           <FormplayerEmbed
             ref={iframeRef}
+            onContentWindowReady={cw => {
+              rootContentWindowRef.current = cw;
+            }}
             formInitData={formInitData}
             emptyMessage="Choose a form type to load schema and ui from the active bundle, then adjust params / saved JSON and click Apply."
           />
diff --git a/desktop/src/pages/WorkbenchCustomAppPage.tsx b/desktop/src/pages/WorkbenchCustomAppPage.tsx
index 51608001b..5261ed4ce 100644
--- a/desktop/src/pages/WorkbenchCustomAppPage.tsx
+++ b/desktop/src/pages/WorkbenchCustomAppPage.tsx
@@ -5,6 +5,7 @@ import { FormFinalizeDialog } from '../components/FormFinalizeDialog';
 import { useDeveloperMode } from '../hooks/useDeveloperMode';
 import type { FinalizeRequest } from '../lib/formPreviewBridge';
 import { handleFormPreviewBridgeMessage } from '../lib/formPreviewBridge';
+import { messageSourceMatchesIframe } from '../lib/iframeMessageSource';
 import { tauriClient } from '../lib/tauriClient';
 import { WORKSPACE_BUNDLE_STATE_FILE } from '../lib/workspacePaths';
 import type { AppBundleState } from '../types/domain';
@@ -12,6 +13,7 @@ import type { AppBundleState } from '../types/domain';
 export function WorkbenchCustomAppPage() {
   const navigate = useNavigate();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const customAppContentWindowRef = useRef<Window | null>(null);
   const finalizeResolverRef = useRef<
     ((v: { result?: string; error?: string }) => void) | null
   >(null);
@@ -79,7 +81,18 @@ export function WorkbenchCustomAppPage() {
 
   useEffect(() => {
     const onMessage = (e: MessageEvent) => {
-      if (e.source !== iframeRef.current?.contentWindow) {
+      const src = e.source;
+      if (src == null || typeof src !== 'object') {
+        return;
+      }
+      const winSrc = src as Window;
+      if (
+        !messageSourceMatchesIframe(
+          winSrc,
+          iframeRef.current,
+          customAppContentWindowRef.current,
+        )
+      ) {
         return;
       }
       void handleFormPreviewBridgeMessage(e, {
@@ -166,6 +179,9 @@ export function WorkbenchCustomAppPage() {
             ref={iframeRef}
             mountKey={mountKey}
             mode={embedMode}
+            onContentWindowReady={cw => {
+              customAppContentWindowRef.current = cw;
+            }}
           />
         ) : developerMode ? (
           <p className="notice warn">
diff --git a/formulus-formplayer/README.md b/formulus-formplayer/README.md
index cc3bd826e..d25e8e7e8 100644
--- a/formulus-formplayer/README.md
+++ b/formulus-formplayer/README.md
@@ -180,6 +180,30 @@ Forms that use a root `SwipeLayout` in `ui.json` support these `options`:
 
 Per-control focus: set `options.autoFocus: true` on a `Control` to focus that field when its page is shown (takes precedence over `autoFocusFirstInput`).
 
+### Header progress chevrons
+
+On multi-page SwipeLayout forms, **Previous** / **Next** chevron buttons flank the progress bar (disabled on first/last page). They use the same navigation callbacks as the bottom bar.
+
+### Group layout inside SwipeLayout
+
+`Group` pages inside SwipeLayout render **flat** (no card panel) by default. Opt back into a card: `"options": { "variant": "card" }` on the Group.
+
+Swipe gestures attach to the full scroll area (not only the question panel).
+
+### Manual device regression matrix
+
+After formplayer changes, verify on a phone WebView (or ODE Desktop form preview with keyboard):
+
+| Scenario                                  | Pass criteria                                                |
+| ----------------------------------------- | ------------------------------------------------------------ |
+| Multi-page form header                    | Both chevrons visible; disabled at first/last page           |
+| Group page (e.g. GBMIS Sticker / amostra) | Full-width layout; swipe works on background below questions |
+| GBMIS `censo_milda_pessoa` → Anos         | No white scroll gap when typing digits                       |
+| GBMIS `censo` → IME Next                  | No gap when moving field-to-field via keyboard Next          |
+| `age_years` > 120                         | Single validation error via QuestionShell                    |
+
+Rebuild formplayer (`pnpm run build:copy`) before testing in Formulus or Desktop developer mode.
+
 ## Validation error display
 
 Built-in controls and custom question types wrapped by `CustomQuestionTypeAdapter` show validation messages **once** in `QuestionShell` (error alert with icon below the field). Child widgets should use `error` / `validation.error` for red borders only — do not also render `validation.message` as `helperText` or inline copy.
diff --git a/formulus-formplayer/package.json b/formulus-formplayer/package.json
index 6a15f0cac..674b6d33e 100644
--- a/formulus-formplayer/package.json
+++ b/formulus-formplayer/package.json
@@ -66,6 +66,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-storybook": "10.2.19",
     "globals": "^17.1.0",
+    "jsdom": "^26.1.0",
     "prettier": "3.8.1",
     "react-refresh": "^0.18.0",
     "storybook": "^10.2.19",
@@ -84,10 +85,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "esbuild"
-    ]
   }
 }
diff --git a/formulus-formplayer/pnpm-lock.yaml b/formulus-formplayer/pnpm-lock.yaml
index 890493449..92889e372 100644
--- a/formulus-formplayer/pnpm-lock.yaml
+++ b/formulus-formplayer/pnpm-lock.yaml
@@ -129,6 +129,9 @@ importers:
       globals:
         specifier: ^17.1.0
         version: 17.6.0
+      jsdom:
+        specifier: ^26.1.0
+        version: 26.1.0
       prettier:
         specifier: 3.8.1
         version: 3.8.1
@@ -146,13 +149,16 @@ importers:
         version: 6.4.2(@types/node@24.12.4)(terser@5.47.1)(yaml@2.9.0)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.12.4)(terser@5.47.1)(yaml@2.9.0)
+        version: 3.2.4(@types/node@24.12.4)(jsdom@26.1.0)(terser@5.47.1)(yaml@2.9.0)
 
 packages:
 
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -240,6 +246,34 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
   '@date-io/core@3.2.0':
     resolution: {integrity: sha512-hqwXvY8/YBsT9RwQITG868ZNb1MVFFkF7W1Ecv4P472j/ZWa7EFcgSmxy8PUElNVZfvhdvfv+a8j6NWJqOX5mA==}
 
@@ -1974,9 +2008,17 @@ packages:
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
@@ -2009,6 +2051,9 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
@@ -2107,6 +2152,10 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
@@ -2473,14 +2522,26 @@ packages:
   hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
 
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
 
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -2602,6 +2663,9 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -2709,6 +2773,15 @@ packages:
   jsc-safe-url@0.2.4:
     resolution: {integrity: sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q==}
 
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -2775,6 +2848,9 @@ packages:
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
   lru-cache@11.3.6:
     resolution: {integrity: sha512-Gf/KoL3C/MlI7Bt0PGI9I+TeTC/I6r/csU58N4BSNc4lppLBeKsOdFYkK+dX0ABDUMJNfCHTyPpzwwO21Awd3A==}
     engines: {node: 20 || >=22}
@@ -2940,6 +3016,9 @@ packages:
   nullthrows@1.1.1:
     resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
 
+  nwsapi@2.2.24:
+    resolution: {integrity: sha512-7YRhZ3jS45LwmSCT4b2sVFHt/WuovaktDU07QrtOBY2PXskss5a9jfmR9jptyumwXST+rFjrmppMY1KT/yn35A==}
+
   ob1@0.84.4:
     resolution: {integrity: sha512-eJXMpz4aQHXF/YBB9ddqZDIS+ooO91hObo9FoW/xBkr54/zCwYYCDqT/O54vNo8kOkWs5Ou/y28NgdrV0edQNA==}
     engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
@@ -3019,6 +3098,9 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -3235,6 +3317,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
   run-applescript@7.1.0:
     resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
     engines: {node: '>=18'}
@@ -3251,6 +3336,13 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -3445,6 +3537,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   synckit@0.11.12:
     resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3482,6 +3577,13 @@ packages:
     resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
     engines: {node: '>=14.0.0'}
 
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
   tmpl@1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
 
@@ -3493,6 +3595,14 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
   ts-api-utils@2.5.0:
     resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
     engines: {node: '>=18.12'}
@@ -3655,18 +3765,39 @@ packages:
   vlq@1.0.1:
     resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}
 
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
   web-vitals@5.2.0:
     resolution: {integrity: sha512-i2z98bEmaCqSDiHEDu+gHl/dmR4Q+TxFmG3/13KkMO+o8UxQzCqWaDRCiLgEa41nlO4VpXSI0ASa1xWmO9sBlA==}
 
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
   whatwg-fetch@3.6.20:
     resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}
 
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -3729,6 +3860,13 @@ packages:
     resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
     engines: {node: '>=18'}
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -3770,6 +3908,14 @@ snapshots:
 
   '@adobe/css-tools@4.4.4': {}
 
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -3884,6 +4030,26 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
   '@date-io/core@3.2.0': {}
 
   '@date-io/dayjs@3.2.0(dayjs@1.10.7)':
@@ -4456,7 +4622,9 @@ snapshots:
       react-native: 0.85.3(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.6)
       react-native-svg: 15.15.5(react-native@0.85.3(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.6))(react@19.2.6)
 
-  '@ode/observation-query@file:../packages/observation-query': {}
+  '@ode/observation-query@file:../packages/observation-query':
+    dependencies:
+      '@babel/runtime': 7.29.2
 
   '@ode/tokens@file:../packages/tokens': {}
 
@@ -5436,8 +5604,18 @@ snapshots:
 
   css.escape@1.5.1: {}
 
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
   csstype@3.2.3: {}
 
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
   data-view-buffer@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -5466,6 +5644,8 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decimal.js@10.6.0: {}
+
   deep-eql@5.0.2: {}
 
   deep-is@0.1.4: {}
@@ -5552,6 +5732,8 @@ snapshots:
 
   entities@4.5.0: {}
 
+  entities@6.0.1: {}
+
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
@@ -6054,6 +6236,10 @@ snapshots:
     dependencies:
       react-is: 16.13.1
 
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -6062,6 +6248,13 @@ snapshots:
       statuses: 2.0.2
       toidentifier: 1.0.1
 
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
@@ -6069,6 +6262,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
@@ -6179,6 +6376,8 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  is-potential-custom-element-name@1.0.1: {}
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -6320,6 +6519,33 @@ snapshots:
 
   jsc-safe-url@0.2.4: {}
 
+  jsdom@26.1.0:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.24
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.20.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
@@ -6377,6 +6603,8 @@ snapshots:
 
   loupe@3.2.1: {}
 
+  lru-cache@10.4.3: {}
+
   lru-cache@11.3.6: {}
 
   lru-cache@5.1.1:
@@ -6633,6 +6861,8 @@ snapshots:
 
   nullthrows@1.1.1: {}
 
+  nwsapi@2.2.24: {}
+
   ob1@0.84.4:
     dependencies:
       flow-enums-runtime: 0.0.6
@@ -6778,6 +7008,10 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
   parseurl@1.3.3: {}
 
   path-exists@4.0.0: {}
@@ -7059,6 +7293,8 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.60.4
       fsevents: 2.3.3
 
+  rrweb-cssom@0.8.0: {}
+
   run-applescript@7.1.0: {}
 
   safe-array-concat@1.1.4:
@@ -7080,6 +7316,12 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  safer-buffer@2.1.2: {}
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
   scheduler@0.27.0: {}
 
   semver@6.3.1: {}
@@ -7322,6 +7564,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  symbol-tree@3.2.4: {}
+
   synckit@0.11.12:
     dependencies:
       '@pkgr/core': 0.2.9
@@ -7352,6 +7596,12 @@ snapshots:
 
   tinyspy@4.0.4: {}
 
+  tldts-core@6.1.86: {}
+
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
   tmpl@1.0.5: {}
 
   to-regex-range@5.0.1:
@@ -7360,6 +7610,14 @@ snapshots:
 
   toidentifier@1.0.1: {}
 
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
   ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
@@ -7495,7 +7753,7 @@ snapshots:
       terser: 5.47.1
       yaml: 2.9.0
 
-  vitest@3.2.4(@types/node@24.12.4)(terser@5.47.1)(yaml@2.9.0):
+  vitest@3.2.4(@types/node@24.12.4)(jsdom@26.1.0)(terser@5.47.1)(yaml@2.9.0):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
@@ -7522,6 +7780,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.12.4
+      jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti
       - less
@@ -7538,16 +7797,33 @@ snapshots:
 
   vlq@1.0.1: {}
 
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
   walker@1.0.8:
     dependencies:
       makeerror: 1.0.12
 
   web-vitals@5.2.0: {}
 
+  webidl-conversions@7.0.0: {}
+
   webpack-virtual-modules@0.6.2: {}
 
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
   whatwg-fetch@3.6.20: {}
 
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -7614,6 +7890,10 @@ snapshots:
     dependencies:
       is-wsl: 3.1.1
 
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
diff --git a/formulus-formplayer/pnpm-workspace.yaml b/formulus-formplayer/pnpm-workspace.yaml
new file mode 100644
index 000000000..35245de10
--- /dev/null
+++ b/formulus-formplayer/pnpm-workspace.yaml
@@ -0,0 +1,4 @@
+# pnpm 10+ reads project settings here (not package.json#pnpm).
+# Allow lifecycle scripts only for these native/tooling deps.
+onlyBuiltDependencies:
+  - esbuild
diff --git a/formulus-formplayer/src/App.tsx b/formulus-formplayer/src/App.tsx
index bbe190a0e..e1ac2dfbb 100644
--- a/formulus-formplayer/src/App.tsx
+++ b/formulus-formplayer/src/App.tsx
@@ -51,6 +51,10 @@ import SwipeLayoutRenderer, {
   swipeLayoutTester,
   groupAsSwipeLayoutTester,
 } from './renderers/SwipeLayoutRenderer';
+import {
+  FlatGroupLayout,
+  flatGroupLayoutTester,
+} from './renderers/FlatGroupLayout';
 import { finalizeRenderer, finalizeTester } from './renderers/FinalizeRenderer';
 import PhotoQuestionRenderer, {
   photoQuestionTester,
@@ -100,7 +104,13 @@ import { loadCustomQuestionTypes } from './services/CustomQuestionTypeLoader';
 import { loadCustomValidators } from './services/CustomValidatorLoader';
 import { customValidatorRegistry } from './services/CustomValidatorRegistry';
 import { runCustomValidatorsAndRefreshData } from './services/customValidatorDataRefresh';
+import { resolveErrorPageIndex } from './utils/errorPageNavigation';
+import { applyAutoSequences } from './utils/autoSequence';
 import { newDraftSessionKey } from './utils/draftSessionKey';
+import {
+  formDataJsonEqual,
+  mergePreservingSubObsArrays,
+} from './renderers/subObservationHelpers';
 
 /** Embedded sub-observation session (also accepts legacy `returnOnly` from older hosts). */
 function isSubObservationSession(init: FormInitData): boolean {
@@ -108,6 +118,31 @@ function isSubObservationSession(init: FormInitData): boolean {
   return Boolean(i.subObservationMode || i.returnOnly);
 }
 
+function readAutoSequenceRuntime() {
+  const w = window as unknown as {
+    formulusSubObservationContext?: Record<string, unknown> | null;
+    formulusSessionContext?: Record<string, unknown> | null;
+  };
+  return {
+    subObservationContext: w.formulusSubObservationContext ?? null,
+    sessionContext: w.formulusSessionContext ?? null,
+  };
+}
+
+/** Root observation data aligned to schema, with platform `x-autoSequence` applied on open. */
+function prepareInitialFormData(
+  raw: Record<string, unknown>,
+  formSchema: unknown,
+): Record<string, unknown> {
+  const root = prepareRootObservationData(raw, formSchema);
+  const { data } = applyAutoSequences(
+    root,
+    formSchema as JsonSchema7 | undefined,
+    readAutoSequenceRuntime(),
+  );
+  return data;
+}
+
 // Mock and DevTestbed are loaded only in development via dynamic import (see index.tsx).
 // This keeps ~2000+ lines of mock code out of production bundles.
 function isMockActive(): boolean {
@@ -250,12 +285,19 @@ interface FormContextType {
    * Not part of the native bridge.
    */
   draftSessionKey: string | null;
+  /**
+   * Commit a full root data object to App state (auto-sequence + validators).
+   * Used by sub-observation merge so nested rows survive JsonForms controlled-mode
+   * debounce races where `handleChange` alone does not reach `onChange` in time.
+   */
+  commitFormData?: (data: Record<string, unknown>) => void;
 }
 
 export const FormContext = createContext<FormContextType>({
   formInitData: null,
   keyboardEnterKeyHint: undefined,
   draftSessionKey: null,
+  commitFormData: undefined,
 });
 
 export const useFormContext = () => useContext(FormContext);
@@ -265,6 +307,7 @@ export const customRenderers = [
     tester: shellInputControlTester,
     renderer: ShellInputControl,
   },
+  { tester: flatGroupLayoutTester, renderer: FlatGroupLayout },
   { tester: swipeLayoutTester, renderer: SwipeLayoutRenderer },
   { tester: groupAsSwipeLayoutTester, renderer: SwipeLayoutRenderer },
   { tester: finalizeTester, renderer: finalizeRenderer.renderer },
@@ -302,6 +345,8 @@ function App() {
 
   // State for form data, schema, and UI schema
   const [data, setData] = useState<FormData>({});
+  /** Latest form data — read from event handlers that may run before React re-renders. */
+  const dataRef = useRef<FormData>({});
   const [schema, setSchema] = useState<FormSchema | null>(null);
   const [uischema, setUISchema] = useState<FormUISchema | null>(null);
 
@@ -579,11 +624,22 @@ function App() {
         ];
         (window as unknown as Record<string, unknown>).formulusSessionContext =
           sessionContext ?? null;
+        (
+          window as unknown as Record<string, unknown>
+        ).formulusSubObservationContext =
+          sessionContext &&
+          typeof sessionContext === 'object' &&
+          'subObservation' in (sessionContext as Record<string, unknown>)
+            ? (sessionContext as Record<string, unknown>).subObservation
+            : null;
 
         if (savedData && Object.keys(savedData).length > 0) {
           console.log('Preloading saved data:', savedData);
           setData(
-            prepareRootObservationData(savedData as FormData, formSchemaTyped),
+            prepareInitialFormData(
+              savedData as Record<string, unknown>,
+              formSchemaTyped,
+            ),
           );
         } else if (!isSubObservationSession(initData)) {
           const formVersion = (formSchemaTyped as { version?: string })
@@ -604,14 +660,14 @@ function App() {
           );
           const withSticky = applyStickyDefaults(withTokens, relevantSticky);
           console.log('Preloading initialization form values:', withSticky);
-          setData(prepareRootObservationData(withSticky, formSchemaTyped));
+          setData(prepareInitialFormData(withSticky, formSchemaTyped));
         } else {
           const defaultData = applySchemaDefaultTokens(
             initialFormDataFromParams(params),
             formSchemaTyped,
           );
           console.log('Preloading initialization form values:', defaultData);
-          setData(prepareRootObservationData(defaultData, formSchemaTyped));
+          setData(prepareInitialFormData(defaultData, formSchemaTyped));
         }
 
         console.log('Form params (if any, beyond schemas/data):', params);
@@ -917,32 +973,135 @@ function App() {
     return instance;
   }, [extensionDefinitions, customTypeFormats]);
 
+  // Handler for resuming a draft
+  const handleResumeDraft = useCallback(
+    (draftId: string) => {
+      const draft = draftService.getDraft(draftId);
+      if (draft && pendingFormInit) {
+        console.log('Resuming draft:', draftId, draft);
+
+        // Create new FormInitData with draft data as savedData
+        const initDataWithDraft: FormInitData = {
+          ...pendingFormInit,
+          savedData: draft.data,
+        };
+
+        // Initialize form with draft data (keep the same draft row when saving)
+        initializeForm(
+          initDataWithDraft,
+          draft.draftSessionKey ?? `legacy_${draft.id}`,
+        );
+
+        // Hide draft selector
+        setShowDraftSelector(false);
+        setPendingFormInit(null);
+      }
+    },
+    [pendingFormInit, initializeForm],
+  );
+
+  // Handler for starting a new form (ignoring drafts)
+  const handleStartNewForm = useCallback(() => {
+    if (pendingFormInit) {
+      console.log('Starting new form, ignoring drafts');
+      initializeForm(pendingFormInit, newDraftSessionKey());
+      setShowDraftSelector(false);
+      setPendingFormInit(null);
+    }
+  }, [pendingFormInit, initializeForm]);
+
+  const refreshFormData = useCallback(
+    (newData: Record<string, unknown>) => {
+      const autoRuntime = readAutoSequenceRuntime();
+      const { data: sequencedData } = applyAutoSequences(
+        newData,
+        schema ?? undefined,
+        autoRuntime,
+      );
+      const { errors, data: refreshedData } = runCustomValidatorsAndRefreshData(
+        uischema ?? undefined,
+        schema ?? undefined,
+        sequencedData,
+        ajv,
+      );
+      setCustomValidatorErrors(errors);
+      return refreshedData;
+    },
+    [uischema, schema, ajv],
+  );
+
+  const persistDraftIfRootSession = useCallback(
+    (refreshedData: Record<string, unknown>) => {
+      if (formInitData && !isSubObservationSession(formInitData)) {
+        draftService.saveDraft(
+          formInitData.formType,
+          refreshedData,
+          formInitData,
+          draftSessionKey,
+        );
+      }
+    },
+    [formInitData, draftSessionKey],
+  );
+
+  const handleDataChange = useCallback(
+    ({ data: newData }: { data: FormData }) => {
+      const incoming = newData as Record<string, unknown>;
+      const baseline = dataRef.current as Record<string, unknown>;
+      const merged = mergePreservingSubObsArrays(baseline, incoming);
+      const refreshedData = refreshFormData(merged);
+      // JsonForms re-emits when we push merged sub-obs arrays back; skip when
+      // nothing actually changed to break the render / draft persistence loop.
+      if (formDataJsonEqual(refreshedData, baseline)) {
+        return;
+      }
+      dataRef.current = refreshedData;
+      setData(refreshedData);
+      persistDraftIfRootSession(refreshedData);
+    },
+    [refreshFormData, persistDraftIfRootSession],
+  );
+
+  const commitFormData = useCallback(
+    (newData: Record<string, unknown>) => {
+      const refreshedData = refreshFormData(newData);
+      dataRef.current = refreshedData;
+      setData(refreshedData);
+      persistDraftIfRootSession(refreshedData);
+    },
+    [refreshFormData, persistDraftIfRootSession],
+  );
+
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
   // Set up event listeners for navigation and finalization
   useEffect(() => {
     const handleNavigateToError = (event: CustomEvent) => {
       if (!uischema) return;
 
-      const path = event.detail.path;
-      const field = path.split('/').pop();
-      const screens = uischema.elements;
-
-      for (let i = 0; i < screens.length; i++) {
-        const screen = screens[i];
-        // Skip the Finalize screen
-        if (screen.type === 'Finalize') continue;
-
-        // Type guard to ensure elements exists
-        if ('elements' in screen && screen.elements) {
-          if (screen.elements.some((el: any) => el.scope?.includes(field))) {
-            // Dispatch a custom event that SwipeLayoutWrapper will listen for
-            const navigateEvent = new CustomEvent('navigateToPage', {
-              detail: { page: i },
-            });
-            window.dispatchEvent(navigateEvent);
-            break;
-          }
-        }
+      const path = event.detail?.path;
+      if (!path || typeof path !== 'string') return;
+
+      const pageIndex = resolveErrorPageIndex(uischema, path);
+      if (pageIndex !== null) {
+        window.dispatchEvent(
+          new CustomEvent('navigateToPage', {
+            detail: { page: pageIndex },
+          }),
+        );
+      }
+    };
+
+    const handleRevalidate = () => {
+      const current = dataRef.current as Record<string, unknown>;
+      if (!current || Object.keys(current).length === 0) {
+        return;
       }
+      const refreshedData = refreshFormData(current);
+      dataRef.current = refreshedData;
+      setData(refreshedData);
     };
 
     const handleShowValidation = () => {
@@ -955,13 +1114,14 @@ function App() {
     const handleFinalizeForm = (event: Event) => {
       // Reaching finalize is a meaningful checkpoint: ensure validation is shown.
       handleShowValidation();
-      // Prefer the payload from the FinalizeRenderer if available
       const customEvent = event as CustomEvent<{
         formInitData?: FormInitData;
         data?: FormData;
       }>;
       const payloadFormInit = customEvent.detail?.formInitData || formInitData;
-      const rawPayload = customEvent.detail?.data || data;
+      const rawPayload =
+        (dataRef.current as Record<string, unknown> | undefined) ??
+        customEvent.detail?.data;
 
       if (!payloadFormInit) {
         console.error(
@@ -973,7 +1133,7 @@ function App() {
         return;
       }
 
-      const rootPayload = prepareRootObservationData(rawPayload, schema);
+      const rootPayload = prepareRootObservationData(rawPayload ?? {}, schema);
       const { errors: finalizeValidatorErrors, data: payloadData } =
         runCustomValidatorsAndRefreshData(
           uischema ?? undefined,
@@ -1040,6 +1200,10 @@ function App() {
       'formShowValidation',
       handleShowValidation as EventListener,
     );
+    window.addEventListener(
+      'formRevalidate',
+      handleRevalidate as EventListener,
+    );
 
     return () => {
       window.removeEventListener(
@@ -1054,70 +1218,12 @@ function App() {
         'formShowValidation',
         handleShowValidation as EventListener,
       );
-    };
-  }, [data, formInitData, draftSessionKey, uischema, schema, ajv]); // Include all dependencies
-
-  // Handler for resuming a draft
-  const handleResumeDraft = useCallback(
-    (draftId: string) => {
-      const draft = draftService.getDraft(draftId);
-      if (draft && pendingFormInit) {
-        console.log('Resuming draft:', draftId, draft);
-
-        // Create new FormInitData with draft data as savedData
-        const initDataWithDraft: FormInitData = {
-          ...pendingFormInit,
-          savedData: draft.data,
-        };
-
-        // Initialize form with draft data (keep the same draft row when saving)
-        initializeForm(
-          initDataWithDraft,
-          draft.draftSessionKey ?? `legacy_${draft.id}`,
-        );
-
-        // Hide draft selector
-        setShowDraftSelector(false);
-        setPendingFormInit(null);
-      }
-    },
-    [pendingFormInit, initializeForm],
-  );
-
-  // Handler for starting a new form (ignoring drafts)
-  const handleStartNewForm = useCallback(() => {
-    if (pendingFormInit) {
-      console.log('Starting new form, ignoring drafts');
-      initializeForm(pendingFormInit, newDraftSessionKey());
-      setShowDraftSelector(false);
-      setPendingFormInit(null);
-    }
-  }, [pendingFormInit, initializeForm]);
-
-  const handleDataChange = useCallback(
-    ({ data: newData }: { data: FormData }) => {
-      const { errors, data: refreshedData } = runCustomValidatorsAndRefreshData(
-        uischema ?? undefined,
-        schema ?? undefined,
-        newData as Record<string, unknown>,
-        ajv,
+      window.removeEventListener(
+        'formRevalidate',
+        handleRevalidate as EventListener,
       );
-
-      setData(refreshedData);
-      setCustomValidatorErrors(errors);
-
-      // Save draft data whenever form data changes (skip embedded sub-observation sessions)
-      if (formInitData && !isSubObservationSession(formInitData)) {
-        draftService.saveDraft(
-          formInitData.formType,
-          refreshedData,
-          formInitData,
-          draftSessionKey,
-        );
-      }
-    },
-    [formInitData, draftSessionKey, uischema, schema, ajv],
-  );
+    };
+  }, [formInitData, draftSessionKey, uischema, schema, ajv, refreshFormData]);
 
   // Create dynamic theme based on dark mode preference and custom app colors.
   // When a custom app provides themeColors, they override the default palette
@@ -1251,7 +1357,8 @@ function App() {
 
   return (
     <ThemeProvider theme={currentTheme}>
-      <FormContext.Provider value={{ formInitData, draftSessionKey }}>
+      <FormContext.Provider
+        value={{ formInitData, draftSessionKey, commitFormData }}>
         <div
           className="App"
           style={{
diff --git a/formulus-formplayer/src/components/FormLayout.tsx b/formulus-formplayer/src/components/FormLayout.tsx
index e93fbfe08..1c0d18f78 100644
--- a/formulus-formplayer/src/components/FormLayout.tsx
+++ b/formulus-formplayer/src/components/FormLayout.tsx
@@ -66,6 +66,15 @@ interface FormLayoutProps {
     onTrigger: () => void;
     disabled?: boolean;
   };
+
+  /**
+   * Optional ref callback merged with the internal keyboard scroll ref
+   * (e.g. react-swipeable on the scroll area).
+   */
+  scrollRefMerge?: (el: HTMLDivElement | null) => void;
+
+  /** Extra props spread onto the scroll area (e.g. swipe gesture handlers). */
+  scrollHandlers?: Record<string, unknown>;
 }
 
 /**
@@ -92,9 +101,19 @@ const FormLayout: React.FC<FormLayoutProps> = ({
   showNavigation = true,
   keyboardSubmitAction,
   contentBottomPadding = 0,
+  scrollRefMerge,
+  scrollHandlers,
 }) => {
   const scrollRef = useKeyboardScrollClamp<HTMLDivElement>();
 
+  const mergedScrollRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      scrollRef.current = el;
+      scrollRefMerge?.(el);
+    },
+    [scrollRef, scrollRefMerge],
+  );
+
   const handleFormSubmit = useCallback(
     (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault();
@@ -106,8 +125,9 @@ const FormLayout: React.FC<FormLayoutProps> = ({
 
   const scrollArea = (
     <Box
-      ref={scrollRef}
+      ref={mergedScrollRef}
       data-testid="formplayer-scroll-area"
+      {...scrollHandlers}
       sx={theme => ({
         flex: 1,
         minHeight: 0,
diff --git a/formulus-formplayer/src/components/FormProgressBar.test.tsx b/formulus-formplayer/src/components/FormProgressBar.test.tsx
new file mode 100644
index 000000000..1c50d9a53
--- /dev/null
+++ b/formulus-formplayer/src/components/FormProgressBar.test.tsx
@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import FormProgressBar from './FormProgressBar';
+
+const theme = createTheme();
+
+afterEach(() => cleanup());
+
+const renderBar = (
+  props: Partial<React.ComponentProps<typeof FormProgressBar>> = {},
+) =>
+  render(
+    <ThemeProvider theme={theme}>
+      <FormProgressBar
+        currentPage={0}
+        totalScreens={3}
+        mode="screens"
+        onNavigatePrevious={vi.fn()}
+        onNavigateNext={vi.fn()}
+        {...props}
+      />
+    </ThemeProvider>,
+  );
+
+describe('FormProgressBar header navigation', () => {
+  it('shows both chevrons on multi-page forms', () => {
+    renderBar();
+    expect(screen.getByLabelText('Previous screen')).toBeInTheDocument();
+    expect(screen.getByLabelText('Next screen')).toBeInTheDocument();
+  });
+
+  it('disables previous chevron on first page', () => {
+    renderBar({
+      currentPage: 0,
+      canNavigatePrevious: false,
+      canNavigateNext: true,
+    });
+    expect(screen.getByLabelText('Previous screen')).toBeDisabled();
+    expect(screen.getByLabelText('Next screen')).not.toBeDisabled();
+  });
+
+  it('disables next chevron on last page', () => {
+    renderBar({
+      currentPage: 2,
+      canNavigatePrevious: true,
+      canNavigateNext: false,
+    });
+    expect(screen.getByLabelText('Previous screen')).not.toBeDisabled();
+    expect(screen.getByLabelText('Next screen')).toBeDisabled();
+  });
+
+  it('hides chevrons when only one screen', () => {
+    renderBar({ totalScreens: 1 });
+    expect(screen.queryByLabelText('Previous screen')).toBeNull();
+    expect(screen.queryByLabelText('Next screen')).toBeNull();
+  });
+
+  it('calls navigation callbacks when enabled', () => {
+    const onNavigatePrevious = vi.fn();
+    const onNavigateNext = vi.fn();
+    renderBar({
+      currentPage: 1,
+      canNavigatePrevious: true,
+      canNavigateNext: true,
+      onNavigatePrevious,
+      onNavigateNext,
+    });
+    screen.getByLabelText('Previous screen').click();
+    screen.getByLabelText('Next screen').click();
+    expect(onNavigatePrevious).toHaveBeenCalledTimes(1);
+    expect(onNavigateNext).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/formulus-formplayer/src/components/FormProgressBar.tsx b/formulus-formplayer/src/components/FormProgressBar.tsx
index 51fa0f35b..0a90c109f 100644
--- a/formulus-formplayer/src/components/FormProgressBar.tsx
+++ b/formulus-formplayer/src/components/FormProgressBar.tsx
@@ -47,6 +47,10 @@ interface FormProgressBarProps {
    */
   onNavigatePrevious?: () => void;
   onNavigateNext?: () => void;
+  /** When false, previous chevron is shown but disabled (multi-page forms). */
+  canNavigatePrevious?: boolean;
+  /** When false, next chevron is shown but disabled (multi-page forms). */
+  canNavigateNext?: boolean;
   /** When true, both header chevrons are disabled (e.g. navigation in flight). */
   navigationDisabled?: boolean;
 }
@@ -130,6 +134,7 @@ const countAnsweredQuestions = (
 const navIconButtonSx = {
   flexShrink: 0,
   p: 0.25,
+  minWidth: 32,
   color: 'text.secondary',
   '&.Mui-disabled': { opacity: 0.35 },
 } as const;
@@ -143,6 +148,8 @@ const FormProgressBar: React.FC<FormProgressBarProps> = ({
   isOnFinalizePage = false,
   onNavigatePrevious,
   onNavigateNext,
+  canNavigatePrevious = false,
+  canNavigateNext = false,
   navigationDisabled = false,
 }) => {
   const progress = useMemo(() => {
@@ -184,20 +191,23 @@ const FormProgressBar: React.FC<FormProgressBarProps> = ({
   }, [currentPage, totalScreens, data, schema, mode, isOnFinalizePage]);
 
   const handlePrev = useCallback(() => {
-    if (navigationDisabled || !onNavigatePrevious) return;
+    if (navigationDisabled || !canNavigatePrevious || !onNavigatePrevious)
+      return;
     onNavigatePrevious();
-  }, [navigationDisabled, onNavigatePrevious]);
+  }, [navigationDisabled, canNavigatePrevious, onNavigatePrevious]);
 
   const handleNext = useCallback(() => {
-    if (navigationDisabled || !onNavigateNext) return;
+    if (navigationDisabled || !canNavigateNext || !onNavigateNext) return;
     onNavigateNext();
-  }, [navigationDisabled, onNavigateNext]);
+  }, [navigationDisabled, canNavigateNext, onNavigateNext]);
 
   if (totalScreens === 0) {
     return null;
   }
 
-  const showHeaderNav = onNavigatePrevious != null || onNavigateNext != null;
+  const showHeaderNav = totalScreens > 1;
+  const prevDisabled = navigationDisabled || !canNavigatePrevious;
+  const nextDisabled = navigationDisabled || !canNavigateNext;
 
   return (
     <Box
@@ -218,7 +228,7 @@ const FormProgressBar: React.FC<FormProgressBarProps> = ({
             size="small"
             aria-label="Previous screen"
             onClick={handlePrev}
-            disabled={navigationDisabled || !onNavigatePrevious}
+            disabled={prevDisabled}
             edge="start"
             sx={navIconButtonSx}>
             <ChevronLeft sx={{ fontSize: 22 }} />
@@ -264,7 +274,7 @@ const FormProgressBar: React.FC<FormProgressBarProps> = ({
             size="small"
             aria-label="Next screen"
             onClick={handleNext}
-            disabled={navigationDisabled || !onNavigateNext}
+            disabled={nextDisabled}
             edge="end"
             sx={navIconButtonSx}>
             <ChevronRight sx={{ fontSize: 22 }} />
diff --git a/formulus-formplayer/src/context/FormDensityContext.tsx b/formulus-formplayer/src/context/FormDensityContext.tsx
index 6dca609c1..d13225af9 100644
--- a/formulus-formplayer/src/context/FormDensityContext.tsx
+++ b/formulus-formplayer/src/context/FormDensityContext.tsx
@@ -1,13 +1,16 @@
 import { createContext, useContext } from 'react';
 
 export type LabelLayout = 'inline' | 'stacked';
+export type GroupVariant = 'flat' | 'card';
 
 export interface FormDensityContextValue {
   labelLayout: LabelLayout;
+  groupVariant: GroupVariant;
 }
 
 export const FormDensityContext = createContext<FormDensityContextValue>({
   labelLayout: 'stacked',
+  groupVariant: 'card',
 });
 
 export const useFormDensity = () => useContext(FormDensityContext);
diff --git a/formulus-formplayer/src/hooks/useKeyboardScrollClamp.integration.test.tsx b/formulus-formplayer/src/hooks/useKeyboardScrollClamp.integration.test.tsx
new file mode 100644
index 000000000..46cf18140
--- /dev/null
+++ b/formulus-formplayer/src/hooks/useKeyboardScrollClamp.integration.test.tsx
@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import FormLayout from '../components/FormLayout';
+
+afterEach(() => cleanup());
+
+describe('FormLayout keyboard scroll integration', () => {
+  it('clamps scrollTop after input without exceeding max scroll', async () => {
+    const { container } = render(
+      <FormLayout showNavigation={false}>
+        <div style={{ height: 1200 }}>
+          <input data-testid="field" type="text" defaultValue="" />
+        </div>
+      </FormLayout>,
+    );
+
+    const scrollArea = screen.getByTestId('formplayer-scroll-area');
+    Object.defineProperty(scrollArea, 'scrollHeight', {
+      configurable: true,
+      value: 1200,
+    });
+    Object.defineProperty(scrollArea, 'clientHeight', {
+      configurable: true,
+      value: 400,
+    });
+    scrollArea.scrollTop = 900;
+
+    const input = screen.getByTestId('field');
+    fireEvent.focusIn(input, { bubbles: true });
+    fireEvent.input(input, { target: { value: 'x' }, bubbles: true });
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const max = Math.max(0, scrollArea.scrollHeight - scrollArea.clientHeight);
+    expect(scrollArea.scrollTop).toBeLessThanOrEqual(max);
+    expect(container).toBeTruthy();
+  });
+});
diff --git a/formulus-formplayer/src/hooks/useKeyboardScrollClamp.ts b/formulus-formplayer/src/hooks/useKeyboardScrollClamp.ts
index 7cd19f98c..a2cca80ee 100644
--- a/formulus-formplayer/src/hooks/useKeyboardScrollClamp.ts
+++ b/formulus-formplayer/src/hooks/useKeyboardScrollClamp.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
+import { clampScrollTop, revealFieldIfNeeded } from '../utils/keyboardScroll';
 
 /** Input types that should trigger scroll clamp on value change. */
 export function isClampableInputType(type: string | undefined): boolean {
@@ -28,26 +29,56 @@ export function isFormFieldForScrollClamp(
   return false;
 }
 
-/** Prevent scrolling past the last real content row inside the form scroll area. */
-export function clampScrollTop(el: HTMLElement): void {
-  const max = Math.max(0, el.scrollHeight - el.clientHeight);
-  if (el.scrollTop > max) {
-    el.scrollTop = max;
-  }
-}
+export { clampScrollTop } from '../utils/keyboardScroll';
+
+const KEYBOARD_REVEAL_DELAY_MS = 100;
 
 /**
- * Clamps FormLayout scroll when the IME opens, on field focus, and after value
- * changes (number stepper +/-, numeric keyboard input, layout reflow).
+ * Clamps FormLayout scroll when the IME opens and reveals focused fields only
+ * when obscured after keyboard animation — never scrollIntoView on value change.
  */
 export function useKeyboardScrollClamp<T extends HTMLElement>() {
   const scrollRef = useRef<T | null>(null);
+  const focusedFieldRef = useRef<HTMLElement | null>(null);
+  const revealTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const clamp = useCallback(() => {
     const el = scrollRef.current;
     if (el) clampScrollTop(el);
   }, []);
 
+  const tryRevealFocused = useCallback(() => {
+    const container = scrollRef.current;
+    const field = focusedFieldRef.current;
+    if (!container || !field || !container.contains(field)) return;
+    revealFieldIfNeeded(container, field, { marginBottom: 24, marginTop: 8 });
+    clamp();
+  }, [clamp]);
+
+  const scheduleReveal = useCallback(() => {
+    if (revealTimerRef.current) {
+      clearTimeout(revealTimerRef.current);
+      revealTimerRef.current = null;
+    }
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        tryRevealFocused();
+        revealTimerRef.current = setTimeout(() => {
+          tryRevealFocused();
+          revealTimerRef.current = null;
+        }, KEYBOARD_REVEAL_DELAY_MS);
+      });
+    });
+  }, [tryRevealFocused]);
+
+  const runClampChain = useCallback(() => {
+    requestAnimationFrame(() => {
+      clamp();
+      requestAnimationFrame(clamp);
+    });
+  }, [clamp]);
+
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -55,30 +86,48 @@ export function useKeyboardScrollClamp<T extends HTMLElement>() {
     const vv = window.visualViewport;
 
     const onViewportChange = () => {
-      requestAnimationFrame(clamp);
+      if (focusedFieldRef.current) {
+        scheduleReveal();
+      } else {
+        requestAnimationFrame(clamp);
+      }
     };
 
     const onFocusIn = (event: FocusEvent) => {
       const target = event.target;
       if (!isFormFieldForScrollClamp(target)) return;
+      if (!(target instanceof HTMLElement)) return;
 
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (target instanceof HTMLElement) {
-            try {
-              target.scrollIntoView({ block: 'nearest', behavior: 'instant' });
-            } catch {
-              target.scrollIntoView({ block: 'nearest' });
-            }
-          }
-          clamp();
-        });
-      });
+      focusedFieldRef.current = target;
+      scheduleReveal();
+    };
+
+    const onFocusOut = (event: FocusEvent) => {
+      const target = event.target;
+      if (!isFormFieldForScrollClamp(target)) return;
+
+      const related = event.relatedTarget;
+      if (
+        related instanceof HTMLElement &&
+        isFormFieldForScrollClamp(related) &&
+        el.contains(related)
+      ) {
+        return;
+      }
+
+      if (focusedFieldRef.current === target) {
+        focusedFieldRef.current = null;
+      }
+      if (revealTimerRef.current) {
+        clearTimeout(revealTimerRef.current);
+        revealTimerRef.current = null;
+      }
+      runClampChain();
     };
 
     const onInputOrChange = (event: Event) => {
       if (!isFormFieldForScrollClamp(event.target)) return;
-      requestAnimationFrame(clamp);
+      runClampChain();
     };
 
     const resizeObserver =
@@ -90,7 +139,10 @@ export function useKeyboardScrollClamp<T extends HTMLElement>() {
               el.contains(active) &&
               isFormFieldForScrollClamp(active)
             ) {
-              requestAnimationFrame(clamp);
+              focusedFieldRef.current = active;
+              tryRevealFocused();
+            } else {
+              runClampChain();
             }
           })
         : null;
@@ -100,6 +152,7 @@ export function useKeyboardScrollClamp<T extends HTMLElement>() {
     vv?.addEventListener('resize', onViewportChange);
     vv?.addEventListener('scroll', onViewportChange);
     el.addEventListener('focusin', onFocusIn);
+    el.addEventListener('focusout', onFocusOut);
     el.addEventListener('input', onInputOrChange, true);
     el.addEventListener('change', onInputOrChange, true);
 
@@ -108,10 +161,14 @@ export function useKeyboardScrollClamp<T extends HTMLElement>() {
       vv?.removeEventListener('resize', onViewportChange);
       vv?.removeEventListener('scroll', onViewportChange);
       el.removeEventListener('focusin', onFocusIn);
+      el.removeEventListener('focusout', onFocusOut);
       el.removeEventListener('input', onInputOrChange, true);
       el.removeEventListener('change', onInputOrChange, true);
+      if (revealTimerRef.current) {
+        clearTimeout(revealTimerRef.current);
+      }
     };
-  }, [clamp]);
+  }, [clamp, runClampChain, scheduleReveal, tryRevealFocused]);
 
   return scrollRef;
 }
diff --git a/formulus-formplayer/src/jsonforms/ShellInputControl.tsx b/formulus-formplayer/src/jsonforms/ShellInputControl.tsx
index c8c0dbe39..20073e0ff 100644
--- a/formulus-formplayer/src/jsonforms/ShellInputControl.tsx
+++ b/formulus-formplayer/src/jsonforms/ShellInputControl.tsx
@@ -35,6 +35,22 @@ const ShellInputControl = (props: ControlProps) => {
   const autoFocus =
     (uischema as { options?: { autoFocus?: boolean } })?.options?.autoFocus ===
     true;
+  const uiOptions = (
+    uischema as {
+      options?: {
+        multi?: boolean;
+        minRows?: number;
+        rows?: number;
+        maxRows?: number;
+      };
+    }
+  )?.options;
+  const multiline = uiOptions?.multi === true;
+  const minRows =
+    typeof uiOptions?.minRows === 'number' ? uiOptions.minRows : undefined;
+  const rows = typeof uiOptions?.rows === 'number' ? uiOptions.rows : undefined;
+  const maxRows =
+    typeof uiOptions?.maxRows === 'number' ? uiOptions.maxRows : undefined;
 
   const cellProps = {
     ...(props as React.ComponentProps<typeof MuiInputText>),
@@ -52,6 +68,10 @@ const ShellInputControl = (props: ControlProps) => {
         label={undefined}
         isValid={isValid}
         muiInputProps={{
+          ...(multiline ? { multiline: true } : {}),
+          ...(minRows != null ? { minRows } : {}),
+          ...(rows != null ? { rows } : {}),
+          ...(maxRows != null ? { maxRows } : {}),
           ...(keyboardEnterKeyHint
             ? { enterKeyHint: keyboardEnterKeyHint }
             : {}),
diff --git a/formulus-formplayer/src/renderers/FlatGroupLayout.test.tsx b/formulus-formplayer/src/renderers/FlatGroupLayout.test.tsx
new file mode 100644
index 000000000..de4cd878d
--- /dev/null
+++ b/formulus-formplayer/src/renderers/FlatGroupLayout.test.tsx
@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { CardGroupShell } from './FlatGroupLayout';
+
+const theme = createTheme();
+
+afterEach(() => cleanup());
+
+describe('CardGroupShell', () => {
+  it('renders group title and children', () => {
+    render(
+      <ThemeProvider theme={theme}>
+        <CardGroupShell label="Sticker / amostra">
+          <div data-testid="child">Field</div>
+        </CardGroupShell>
+      </ThemeProvider>,
+    );
+    expect(screen.getByText('Sticker / amostra')).toBeInTheDocument();
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+});
diff --git a/formulus-formplayer/src/renderers/FlatGroupLayout.tsx b/formulus-formplayer/src/renderers/FlatGroupLayout.tsx
new file mode 100644
index 000000000..99ed0466a
--- /dev/null
+++ b/formulus-formplayer/src/renderers/FlatGroupLayout.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import {
+  LayoutProps,
+  RankedTester,
+  rankWith,
+  uiTypeIs,
+  UISchemaElement,
+} from '@jsonforms/core';
+import { MaterialLayoutRenderer } from '@jsonforms/material-renderers';
+import { Box, Card, CardContent, CardHeader, Typography } from '@mui/material';
+import { useFormDensity } from '../context/FormDensityContext';
+
+const isEmpty = (value: string | undefined): boolean =>
+  value === undefined || value === null || value.trim() === '';
+
+/** @internal for tests — card shell without JSON Forms wrapper */
+export function CardGroupShell({
+  label,
+  children,
+}: {
+  label?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card sx={{ mb: 1.25 }}>
+      {!isEmpty(label) && (
+        <CardHeader
+          title={label}
+          sx={{ pb: 0.5, '& .MuiCardHeader-title': { fontSize: '1rem' } }}
+        />
+      )}
+      <CardContent sx={{ pt: 0, '&:last-child': { pb: 2 } }}>
+        {children}
+      </CardContent>
+    </Card>
+  );
+}
+
+export const flatGroupLayoutTester: RankedTester = rankWith(
+  2,
+  uiTypeIs('Group'),
+);
+
+const FlatGroupLayoutRenderer = ({
+  uischema,
+  schema,
+  path,
+  visible,
+  enabled,
+  renderers,
+  cells,
+  direction,
+  label,
+}: LayoutProps) => {
+  const { groupVariant } = useFormDensity();
+  const groupLayout = uischema as {
+    elements: UISchemaElement[];
+    options?: { variant?: string };
+  };
+  const useCard =
+    groupVariant === 'card' || groupLayout.options?.variant === 'card';
+
+  if (!visible) {
+    return null;
+  }
+
+  const childProps = {
+    elements: groupLayout.elements,
+    schema,
+    path,
+    enabled,
+    direction,
+    visible,
+    renderers,
+    cells,
+  };
+
+  const layout = (
+    <MaterialLayoutRenderer
+      {...childProps}
+      visible={visible}
+      enabled={enabled}
+      elements={groupLayout.elements}
+    />
+  );
+
+  if (useCard) {
+    return <CardGroupShell label={label}>{layout}</CardGroupShell>;
+  }
+
+  return (
+    <Box sx={{ width: '100%', mb: 1 }}>
+      {!isEmpty(label) && (
+        <Typography
+          variant="subtitle2"
+          component="h2"
+          sx={{
+            fontWeight: 700,
+            fontSize: '1rem',
+            lineHeight: 1.3,
+            pt: 0,
+            pb: 0.5,
+            px: 0,
+            textAlign: 'left',
+          }}>
+          {label}
+        </Typography>
+      )}
+      {layout}
+    </Box>
+  );
+};
+
+export const FlatGroupLayout = withJsonFormsLayoutProps(
+  FlatGroupLayoutRenderer,
+);
diff --git a/formulus-formplayer/src/renderers/QrcodeQuestionRenderer.tsx b/formulus-formplayer/src/renderers/QrcodeQuestionRenderer.tsx
index bb122a634..1a2635e1c 100644
--- a/formulus-formplayer/src/renderers/QrcodeQuestionRenderer.tsx
+++ b/formulus-formplayer/src/renderers/QrcodeQuestionRenderer.tsx
@@ -95,6 +95,11 @@ const QrcodeQuestionRenderer: React.FC<ControlProps> = ({
         if (qrError.status === 'cancelled') {
           // User cancelled — don't show error
           console.log('QR scan cancelled by user');
+        } else if (
+          qrError.status === 'error' &&
+          qrError.message === 'QR scanner is already open'
+        ) {
+          setError('Scanner is already open. Close it first, then try again.');
         } else if (qrError.status === 'error') {
           setError(qrError.message || 'QR scanner error');
         } else {
diff --git a/formulus-formplayer/src/renderers/SubObservationQuestionRenderer.tsx b/formulus-formplayer/src/renderers/SubObservationQuestionRenderer.tsx
index 2accb85e5..577499556 100644
--- a/formulus-formplayer/src/renderers/SubObservationQuestionRenderer.tsx
+++ b/formulus-formplayer/src/renderers/SubObservationQuestionRenderer.tsx
@@ -4,7 +4,7 @@
  * `openFormplayer` with `subObservationMode`.
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { withJsonFormsControlProps, useJsonForms } from '@jsonforms/react';
 import { ControlProps, rankWith, schemaMatches } from '@jsonforms/core';
 import { Box, Typography, Button, IconButton, Tooltip } from '@mui/material';
@@ -13,19 +13,21 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import QuestionShell from '../components/QuestionShell';
 import FormulusClient from '../services/FormulusInterface';
 import type { FormCompletionResult } from '../types/FormulusInterfaceDefinition';
+import { useFormContext } from '../App';
 import { tokens } from '../theme/tokens-adapter';
 import {
   buildColumns,
   coerceSubObservationRows,
   optionalRecordMap,
   readSubObservationField,
-  resolveInitialValues,
   sortRows,
   readDataPath,
+  writeDataPath,
   resolveItemLabel,
   resolveAddButtonLabel,
   resolveEmptyLabel,
   resolveDeleteFallbackLabel,
+  buildSubObservationOpenParams,
   type OrderBySpec,
 } from './subObservationHelpers';
 
@@ -112,6 +114,7 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
   required,
 }) => {
   const jsonForms = useJsonForms();
+  const { commitFormData } = useFormContext();
   const config = useMemo(() => extractConfig(schema), [schema]);
 
   const childFormType =
@@ -153,52 +156,23 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
     [valueRows, missingKeys, config.orderBy],
   );
 
-  const [rows, setRows] = useState<Record<string, unknown>[]>(sortedFromProps);
+  // JsonForms `data` is the source of truth; pushSorted writes via handleChange only.
+  const rows = sortedFromProps;
+
   const [error, setError] = useState<string | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
-  const [prevSortedFromProps, setPrevSortedFromProps] =
-    useState(sortedFromProps);
 
-  if (sortedFromProps !== prevSortedFromProps) {
-    setPrevSortedFromProps(sortedFromProps);
-    setRows(sortedFromProps);
-  }
-
-  useEffect(() => {
-    function refresh() {
-      setRows(prev => sortRows(prev, config.orderBy as OrderBySpec));
-    }
-    function onVisibility() {
-      if (document.visibilityState === 'visible') refresh();
-    }
-    document.addEventListener('visibilitychange', onVisibility);
-    window.addEventListener('focus', refresh);
-    return () => {
-      document.removeEventListener('visibilitychange', onVisibility);
-      window.removeEventListener('focus', refresh);
-    };
-  }, [config.orderBy]);
-
-  useEffect(() => {
-    const prev =
-      typeof window !== 'undefined'
-        ? (window as Window & { onReceiveFocus?: () => void }).onReceiveFocus
-        : undefined;
-    const wrapped = () => {
-      if (typeof prev === 'function') prev();
-      setRows(r => sortRows(r, config.orderBy as OrderBySpec));
-    };
-    if (typeof window !== 'undefined') {
-      (window as Window & { onReceiveFocus?: () => void }).onReceiveFocus =
-        wrapped;
-    }
-    return () => {
-      if (typeof window !== 'undefined') {
-        (window as Window & { onReceiveFocus?: () => void }).onReceiveFocus =
-          prev;
-      }
-    };
-  }, [config.orderBy]);
+  const getCurrentRows = useCallback((): Record<string, unknown>[] => {
+    const root = jsonForms.core?.data;
+    const raw =
+      root && typeof root === 'object' && path
+        ? readDataPath(root as Record<string, unknown>, path)
+        : data;
+    return sortRows(
+      coerceSubObservationRows(raw),
+      config.orderBy as OrderBySpec,
+    ) as Record<string, unknown>[];
+  }, [jsonForms.core?.data, data, path, config.orderBy]);
 
   const columns = useMemo(() => buildColumns(config, rows), [config, rows]);
 
@@ -227,21 +201,55 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
     [itemLabel],
   );
 
+  const requestFormRevalidation = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      window.setTimeout(() => {
+        window.dispatchEvent(new CustomEvent('formRevalidate'));
+      }, 0);
+    }
+  }, []);
+
   const pushSorted = useCallback(
     (next: Record<string, unknown>[]) => {
       const sorted = sortRows(next, config.orderBy as OrderBySpec);
-      setRows(sorted);
-      setPrevSortedFromProps(sorted);
-      handleChange(path, sorted);
+      const root = jsonForms.core?.data;
+      if (commitFormData && root && typeof root === 'object' && path) {
+        const merged = writeDataPath(
+          root as Record<string, unknown>,
+          path,
+          sorted,
+        );
+        commitFormData(merged);
+      } else {
+        handleChange(path, sorted);
+        requestFormRevalidation();
+      }
     },
-    [config.orderBy, handleChange, path],
+    [
+      commitFormData,
+      config.orderBy,
+      handleChange,
+      jsonForms.core?.data,
+      path,
+      requestFormRevalidation,
+    ],
   );
 
-  const refreshRowsFromFormData = useCallback(() => {
-    const sorted = sortRows(valueRows, config.orderBy as OrderBySpec);
-    setPrevSortedFromProps(sorted);
-    setRows(sorted as Record<string, unknown>[]);
-  }, [valueRows, config.orderBy]);
+  const mergeSubmittedRow = useCallback(
+    (result: FormCompletionResult) => {
+      if (
+        !result?.formData ||
+        (result.status !== 'form_submitted' && result.status !== 'form_updated')
+      ) {
+        return false;
+      }
+      const row = result.formData as Record<string, unknown>;
+      const next = [...getCurrentRows(), row];
+      pushSorted(next);
+      return true;
+    },
+    [getCurrentRows, pushSorted],
+  );
 
   const handleAdd = useCallback(async () => {
     if (!enabled || missingKeys.length || !childFormType) return;
@@ -249,34 +257,31 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
     try {
       setBusyId('add');
       const pv = resolveParentValue(formData, parentValuePath);
-      let baseValues = resolveInitialValues(
-        optionalRecordMap(config.subObservationInitValues),
+      const openParams = buildSubObservationOpenParams(
         formData,
+        config,
         pv,
+        optionalRecordMap(config.subObservationInitValues),
       );
-      if (parentKey && pv != null && baseValues[parentKey] == null) {
-        baseValues = { ...baseValues, [parentKey]: pv };
+      if (parentKey && pv != null && openParams[parentKey] == null) {
+        openParams[parentKey] = pv;
       }
       const result: FormCompletionResult = await client.openFormplayer(
         childFormType,
-        baseValues,
+        openParams,
         {},
         {
           subObservationMode: true,
           skipFinalize: Boolean(config.skipFinalize),
         },
       );
-      if (result?.status === 'form_submitted' && result.formData) {
-        const row = result.formData as Record<string, unknown>;
-        pushSorted([...rows, row]);
-      }
+      mergeSubmittedRow(result);
     } catch (e) {
       setError(
         e instanceof Error ? e.message : 'Unable to add sub-observation',
       );
     } finally {
       setBusyId(null);
-      window.setTimeout(() => refreshRowsFromFormData(), 0);
     }
   }, [
     enabled,
@@ -286,9 +291,7 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
     parentValuePath,
     parentKey,
     config,
-    rows,
-    pushSorted,
-    refreshRowsFromFormData,
+    mergeSubmittedRow,
   ]);
 
   const handleEdit = useCallback(
@@ -298,21 +301,23 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
       try {
         setBusyId(`edit_${index}`);
         const pv = resolveParentValue(formData, parentValuePath);
-        const openValues = resolveInitialValues(
-          optionalRecordMap(config.subObservationEditInitValues),
+        const openParams = buildSubObservationOpenParams(
           formData,
+          config,
           pv,
+          optionalRecordMap(config.subObservationEditInitValues),
         );
+        const { context: _ctx, ...paramDefaults } = openParams;
         const rowData = isObservationWrappedRow(row)
           ? ((row.data ?? {}) as Record<string, unknown>)
           : row;
         const savedData: Record<string, unknown> = {
           ...rowData,
-          ...openValues,
+          ...paramDefaults,
         };
         const result: FormCompletionResult = await client.openFormplayer(
           childFormType,
-          {},
+          openParams,
           savedData,
           {
             subObservationMode: true,
@@ -325,7 +330,7 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
             result.status === 'form_updated') &&
           result.formData
         ) {
-          const updated = rows.map((r, i) =>
+          const updated = getCurrentRows().map((r, i) =>
             i === index ? (result.formData as Record<string, unknown>) : r,
           );
           pushSorted(updated);
@@ -336,7 +341,6 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
         );
       } finally {
         setBusyId(null);
-        window.setTimeout(() => refreshRowsFromFormData(), 0);
       }
     },
     [
@@ -346,9 +350,8 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
       formData,
       parentValuePath,
       config,
-      rows,
+      getCurrentRows,
       pushSorted,
-      refreshRowsFromFormData,
     ],
   );
 
@@ -371,7 +374,7 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
         return;
       }
       try {
-        pushSorted(rows.filter((_, i) => i !== index));
+        pushSorted(getCurrentRows().filter((_, i) => i !== index));
       } catch (e) {
         setError(
           e instanceof Error ? e.message : 'Unable to delete sub-observation',
@@ -382,7 +385,7 @@ const SubObservationQuestionRendererInner: React.FC<ControlProps> = ({
       enabled,
       allowDelete,
       config.displayField,
-      rows,
+      getCurrentRows,
       pushSorted,
       deleteFallbackLabel,
     ],
diff --git a/formulus-formplayer/src/renderers/SwipeLayoutRenderer.tsx b/formulus-formplayer/src/renderers/SwipeLayoutRenderer.tsx
index 7c35ea742..5cfbb7680 100644
--- a/formulus-formplayer/src/renderers/SwipeLayoutRenderer.tsx
+++ b/formulus-formplayer/src/renderers/SwipeLayoutRenderer.tsx
@@ -18,6 +18,7 @@ import {
   rankWith,
   uiTypeIs,
   RankedTester,
+  JsonSchema7,
 } from '@jsonforms/core';
 import { useSwipeable } from 'react-swipeable';
 import { Box, Typography, useTheme } from '@mui/material';
@@ -42,6 +43,7 @@ import {
   focusFirstEnabledTextInput,
 } from '../utils/autofocusHelpers';
 import { navigateToFirstBlockingError } from '../utils/validationNavigation';
+import { formatBlockingErrorSummary } from '../utils/errorPageNavigation';
 
 // ---------------------------------------------------------------------------
 // Testers
@@ -406,9 +408,8 @@ const SwipeLayoutRenderer = ({
 
   const { ref: swipeableRef, ...swipeHandlers } = handlers;
 
-  const mergedSwipeScreenRef = useCallback(
+  const mergeScrollRef = useCallback(
     (el: HTMLDivElement | null) => {
-      swipeScreenRef.current = el;
       if (typeof swipeableRef === 'function') {
         swipeableRef(el);
       }
@@ -416,6 +417,10 @@ const SwipeLayoutRenderer = ({
     [swipeableRef],
   );
 
+  const setSwipeScreenRef = useCallback((el: HTMLDivElement | null) => {
+    swipeScreenRef.current = el;
+  }, []);
+
   const isOnFinalizePage = useMemo(() => {
     return layouts[currentPage]?.type === 'Finalize';
   }, [layouts, currentPage]);
@@ -424,6 +429,15 @@ const SwipeLayoutRenderer = ({
 
   const validationErrorCount = core?.errors?.length ?? 0;
 
+  const validationAlertMessage = useMemo(() => {
+    const errors = core?.errors ?? [];
+    if (errors.length === 0) return '';
+    return formatBlockingErrorSummary(
+      errors,
+      (core?.schema ?? schema) as JsonSchema7,
+    );
+  }, [core?.errors, core?.schema, schema]);
+
   const trySubmitForm = useCallback(() => {
     if (!formInitData) return;
     const errors = core?.errors ?? [];
@@ -489,15 +503,10 @@ const SwipeLayoutRenderer = ({
 
   const formContextForSwipe = useMemo(
     () => ({
-      formInitData: parentFormContext.formInitData,
+      ...parentFormContext,
       keyboardEnterKeyHint,
-      draftSessionKey: parentFormContext.draftSessionKey ?? null,
     }),
-    [
-      parentFormContext.formInitData,
-      parentFormContext.draftSessionKey,
-      keyboardEnterKeyHint,
-    ],
+    [parentFormContext, keyboardEnterKeyHint],
   );
 
   const handleSnackbarClose = useCallback(
@@ -526,7 +535,10 @@ const SwipeLayoutRenderer = ({
     swipeOptions.headerTitle || (schema as any)?.title || undefined;
   const headerFields: string[] = (swipeOptions.headerFields || []).slice(0, 2);
 
-  const densityContextValue = useMemo(() => ({ labelLayout }), [labelLayout]);
+  const densityContextValue = useMemo(
+    () => ({ labelLayout, groupVariant: 'flat' as const }),
+    [labelLayout],
+  );
 
   if (visible === false) {
     return null;
@@ -539,6 +551,8 @@ const SwipeLayoutRenderer = ({
       <FormContext.Provider value={formContextForSwipe}>
         <FormLayout
           keyboardSubmitAction={keyboardSubmitAction}
+          scrollRefMerge={mergeScrollRef}
+          scrollHandlers={swipeHandlers}
           header={
             <>
               <FormProgressBar
@@ -549,16 +563,14 @@ const SwipeLayoutRenderer = ({
                 uischema={uischema}
                 mode="screens"
                 isOnFinalizePage={isOnFinalizePage}
-                onNavigatePrevious={
-                  prevVisiblePage !== null
-                    ? () => navigateToPage(prevVisiblePage)
-                    : undefined
-                }
-                onNavigateNext={
-                  nextVisiblePage !== null
-                    ? () => navigateToPage(nextVisiblePage)
-                    : undefined
-                }
+                canNavigatePrevious={prevVisiblePage !== null}
+                canNavigateNext={nextVisiblePage !== null}
+                onNavigatePrevious={() => {
+                  if (prevVisiblePage !== null) navigateToPage(prevVisiblePage);
+                }}
+                onNavigateNext={() => {
+                  if (nextVisiblePage !== null) navigateToPage(nextVisiblePage);
+                }}
                 navigationDisabled={isNavigating}
               />
               {headerFields.length > 0 && (
@@ -642,10 +654,7 @@ const SwipeLayoutRenderer = ({
           }
           contentBottomPadding={24}
           showNavigation={true}>
-          <div
-            ref={mergedSwipeScreenRef}
-            {...swipeHandlers}
-            className="swipelayout_screen">
+          <div ref={setSwipeScreenRef} className="swipelayout_screen">
             {(uischema as any)?.label && <h1>{(uischema as any).label}</h1>}
             {layouts.length > 0 && layouts[currentPage] && (
               <JsonFormsDispatch
@@ -665,9 +674,7 @@ const SwipeLayoutRenderer = ({
               color="error"
               role="alert"
               sx={{ px: { xs: 1, sm: 1.5 }, pt: 1, pb: 0.5 }}>
-              {validationErrorCount}{' '}
-              {validationErrorCount === 1 ? 'field needs' : 'fields need'}{' '}
-              attention. Tap Done to review.
+              {validationAlertMessage}
             </Typography>
           )}
 
@@ -752,12 +759,19 @@ const SwipeLayoutWrapper = (props: ControlProps) => {
   const [currentPage, setCurrentPage] = useState(0);
   const { formInitData, draftSessionKey } = useFormContext();
   const { data } = props;
+  const skipDraftPersistence =
+    formInitData != null &&
+    Boolean(
+      (formInitData as { subObservationMode?: boolean; returnOnly?: boolean })
+        .subObservationMode ||
+      (formInitData as { returnOnly?: boolean }).returnOnly,
+    );
 
   // Save partial data whenever the page changes or data changes
   const handlePageChange = useCallback(
     (page: number) => {
       // Save the current form data before changing the page
-      if (data && formInitData) {
+      if (data && formInitData && !skipDraftPersistence) {
         console.log('Saving draft data on page change:', data);
         draftService.saveDraft(
           formInitData.formType,
@@ -768,13 +782,13 @@ const SwipeLayoutWrapper = (props: ControlProps) => {
       }
       setCurrentPage(page);
     },
-    [data, formInitData, draftSessionKey],
+    [data, formInitData, draftSessionKey, skipDraftPersistence],
   );
 
   useEffect(() => {
     const handleNavigateToPage = (event: CustomEvent) => {
       // Save the current form data before navigating to a specific page
-      if (data && formInitData) {
+      if (data && formInitData && !skipDraftPersistence) {
         console.log('Saving draft data before navigation event:', data);
         draftService.saveDraft(
           formInitData.formType,
@@ -797,27 +811,7 @@ const SwipeLayoutWrapper = (props: ControlProps) => {
         handleNavigateToPage as EventListener,
       );
     };
-  }, [data, formInitData, draftSessionKey]);
-
-  // Also save data when it changes (even without page change)
-  useEffect(() => {
-    if (data) {
-      // Debounce the save to avoid too many calls
-      const debounceTimer = setTimeout(() => {
-        if (formInitData) {
-          console.log('Saving draft data on data change:', data);
-          draftService.saveDraft(
-            formInitData.formType,
-            data,
-            formInitData,
-            draftSessionKey,
-          );
-        }
-      }, 1000); // 1 second debounce
-
-      return () => clearTimeout(debounceTimer);
-    }
-  }, [data, formInitData, draftSessionKey]);
+  }, [data, formInitData, draftSessionKey, skipDraftPersistence]);
 
   return (
     <SwipeLayoutRenderer
diff --git a/formulus-formplayer/src/renderers/subObservationHelpers.test.ts b/formulus-formplayer/src/renderers/subObservationHelpers.test.ts
index 11df2556f..2443b8071 100644
--- a/formulus-formplayer/src/renderers/subObservationHelpers.test.ts
+++ b/formulus-formplayer/src/renderers/subObservationHelpers.test.ts
@@ -1,6 +1,9 @@
 import { describe, it, expect } from 'vitest';
 import {
+  formDataJsonEqual,
+  mergePreservingSubObsArrays,
   readDataPath,
+  writeDataPath,
   resolveTemplateValue,
   resolveInitialValues,
   buildColumns,
@@ -15,11 +18,47 @@ import {
 } from './subObservationHelpers';
 
 describe('subObservationHelpers', () => {
+  it('mergePreservingSubObsArrays keeps longer baseline arrays', () => {
+    const baseline = { pessoas: [{ id: 1 }] };
+    const incoming = { validar_cama: '1' };
+    const merged = mergePreservingSubObsArrays(baseline, incoming);
+    expect(merged.pessoas).toEqual([{ id: 1 }]);
+    expect(merged.validar_cama).toBe('1');
+  });
+
+  it('mergePreservingSubObsArrays restores omitted quartos from baseline', () => {
+    const baseline = {
+      comments: 'old',
+      quartos: [{ quarto_num: 1, camas: [] }],
+      person_codigos: [],
+    };
+    const incoming = { comments: 'new', assistant1: 'AB' };
+    const merged = mergePreservingSubObsArrays(baseline, incoming);
+    expect(merged.comments).toBe('new');
+    expect(merged.quartos).toEqual(baseline.quartos);
+    expect(merged.person_codigos).toEqual([]);
+  });
+
+  it('formDataJsonEqual compares stable JSON snapshots', () => {
+    expect(formDataJsonEqual({ a: 1 }, { a: 1 })).toBe(true);
+    expect(formDataJsonEqual({ a: 1 }, { a: 2 })).toBe(false);
+  });
+
   it('readDataPath resolves dotted paths', () => {
     expect(readDataPath({ a: { b: 3 } }, 'a.b')).toBe(3);
     expect(readDataPath({}, 'x')).toBeUndefined();
   });
 
+  it('writeDataPath sets top-level and nested paths immutably', () => {
+    const root = { a: { b: 1 }, pessoas: [] as unknown[] };
+    const next = writeDataPath(root, 'pessoas', [{ id: 1 }]);
+    expect(next.pessoas).toEqual([{ id: 1 }]);
+    expect(root.pessoas).toEqual([]);
+    const nested = writeDataPath({ a: { b: 1 } }, 'a.b', 9);
+    expect(nested).toEqual({ a: { b: 9 } });
+    expect(root.a).toEqual({ b: 1 });
+  });
+
   it('resolveTemplateValue expands tokens', () => {
     expect(resolveTemplateValue('{{parentValue}}', {}, 'P1')).toBe('P1');
     expect(
diff --git a/formulus-formplayer/src/renderers/subObservationHelpers.ts b/formulus-formplayer/src/renderers/subObservationHelpers.ts
index be39092e5..34dd3b417 100644
--- a/formulus-formplayer/src/renderers/subObservationHelpers.ts
+++ b/formulus-formplayer/src/renderers/subObservationHelpers.ts
@@ -82,6 +82,85 @@ export function readDataPath(data: unknown, dotPath: string): unknown {
   return cur;
 }
 
+/** Immutable shallow clone along `dotPath`, then set the leaf value. */
+export function writeDataPath(
+  data: Record<string, unknown>,
+  dotPath: string,
+  value: unknown,
+): Record<string, unknown> {
+  if (!dotPath) return data;
+  const keys = dotPath.split('.');
+  if (keys.length === 1) {
+    return { ...data, [dotPath]: value };
+  }
+  const root = { ...data };
+  let cur: Record<string, unknown> = root;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    const next = cur[key];
+    const cloned =
+      next && typeof next === 'object' && !Array.isArray(next)
+        ? { ...(next as Record<string, unknown>) }
+        : Array.isArray(next)
+          ? [...next]
+          : {};
+    cur[key] = cloned;
+    cur = cloned as Record<string, unknown>;
+  }
+  cur[keys[keys.length - 1]] = value;
+  return root;
+}
+
+/** Embedded arrays and derived indexes preserved when JsonForms omits unmounted fields. */
+const PRESERVED_ARRAY_KEYS = [
+  'quartos',
+  'camas',
+  'pessoas',
+  'person_codigos',
+] as const;
+
+/** Stable JSON comparison for form-data equality checks (avoids render loops). */
+export function formDataJsonEqual(
+  a: Record<string, unknown>,
+  b: Record<string, unknown>,
+): boolean {
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Keep embedded sub-obs arrays when JsonForms emits partial onChange payloads.
+ * SwipeLayout only mounts the current page, so controls on other pages (e.g.
+ * `quartos`) are absent from `incoming` even though they still live in our
+ * baseline draft state.
+ */
+export function mergePreservingSubObsArrays(
+  baseline: Record<string, unknown>,
+  incoming: Record<string, unknown>,
+): Record<string, unknown> {
+  const merged = { ...incoming };
+  for (const key of PRESERVED_ARRAY_KEYS) {
+    const baseArr = baseline[key];
+    if (!(key in incoming)) {
+      if (Array.isArray(baseArr)) {
+        merged[key] = baseArr;
+      }
+      continue;
+    }
+    if (!Array.isArray(baseArr) || baseArr.length === 0) {
+      continue;
+    }
+    const inArr = incoming[key];
+    if (!Array.isArray(inArr) || inArr.length < baseArr.length) {
+      merged[key] = baseArr;
+    }
+  }
+  return merged;
+}
+
 /** Matches a string that is exactly one `{{ token }}` with no surrounding text. */
 const SINGLE_TOKEN_RE = /^\s*\{\{\s*([^}]+?)\s*\}\}\s*$/;
 
@@ -136,17 +215,82 @@ export function resolveInitialValues(
   return out;
 }
 
+/** Resolve `subObservationContext` templates from the opening form's data. */
+export function resolveSubObservationContext(
+  mapObj: Record<string, unknown> | null | undefined,
+  formData: Record<string, unknown>,
+  parentValue: string | null,
+): Record<string, unknown> {
+  return resolveInitialValues(mapObj, formData, parentValue);
+}
+
+export function buildSubObservationOpenParams(
+  formData: Record<string, unknown>,
+  config: Record<string, unknown>,
+  parentValue: string | null,
+  initMap?: Record<string, unknown> | null,
+): Record<string, unknown> {
+  const parentSessionContext =
+    typeof window !== 'undefined'
+      ? (
+          window as unknown as {
+            formulusSessionContext?: Record<string, unknown> | null;
+          }
+        ).formulusSessionContext
+      : null;
+
+  const resolved = resolveSubObservationContext(
+    optionalRecordMap(config.subObservationContext),
+    formData,
+    parentValue,
+  );
+  const inheritedSubObservation =
+    parentSessionContext &&
+    typeof parentSessionContext === 'object' &&
+    parentSessionContext.subObservation &&
+    typeof parentSessionContext.subObservation === 'object'
+      ? (parentSessionContext.subObservation as Record<string, unknown>)
+      : {};
+
+  const subObservation: Record<string, unknown> = {
+    ...inheritedSubObservation,
+  };
+  for (const [key, value] of Object.entries(resolved)) {
+    if (value !== '' && value != null) {
+      subObservation[key] = value;
+    }
+  }
+
+  const initValues = resolveInitialValues(initMap, formData, parentValue);
+  const { household_quartos: _legacySnapshot, ...restInit } = initValues;
+
+  const context = {
+    ...(parentSessionContext && typeof parentSessionContext === 'object'
+      ? parentSessionContext
+      : {}),
+    ...(Object.keys(subObservation).length > 0 ? { subObservation } : {}),
+  };
+
+  return {
+    ...restInit,
+    ...(Object.keys(context).length > 0 ? { context } : {}),
+  };
+}
+
 export function formatCellValue(value: unknown): string {
   if (value == null) return '';
   if (typeof value === 'object') return JSON.stringify(value);
   return String(value);
 }
 
+/** Stable empty reference — avoid retriggering sub-observation row sync every render. */
+const EMPTY_SUB_OBSERVATION_ROWS: unknown[] = [];
+
 /** Normalizes JsonForms control data into an array of row payloads. */
 export function coerceSubObservationRows(value: unknown): unknown[] {
-  if (value == null) return [];
+  if (value == null) return EMPTY_SUB_OBSERVATION_ROWS;
   if (Array.isArray(value)) return value;
-  return [];
+  return EMPTY_SUB_OBSERVATION_ROWS;
 }
 
 export function readSubObservationField(
@@ -212,7 +356,9 @@ export function sortRows(
     r && typeof r === 'object' ? (r as Record<string, unknown>) : {},
   );
 
-  if (!asRecords.length) return asRecords;
+  if (!asRecords.length) {
+    return EMPTY_SUB_OBSERVATION_ROWS as Record<string, unknown>[];
+  }
 
   let key: string | null = null;
   let direction = 'desc';
diff --git a/formulus-formplayer/src/setupTests.ts b/formulus-formplayer/src/setupTests.ts
index 8f2609b7b..bb02c60cd 100644
--- a/formulus-formplayer/src/setupTests.ts
+++ b/formulus-formplayer/src/setupTests.ts
@@ -1,5 +1 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/vitest';
diff --git a/formulus-formplayer/src/theme/theme.ts b/formulus-formplayer/src/theme/theme.ts
index 77360c5f7..4e46cecf9 100644
--- a/formulus-formplayer/src/theme/theme.ts
+++ b/formulus-formplayer/src/theme/theme.ts
@@ -430,6 +430,7 @@ export const getThemeOptions = (
         styleOverrides: {
           root: {
             fontSize: parsePx(tokens.typography.fontSize.base),
+            scrollMarginBottom: parsePx(tokens.spacing[6]),
             '&.Mui-focused': {
               '& .MuiOutlinedInput-notchedOutline': {
                 borderColor: primaryMain,
@@ -660,6 +661,23 @@ export const getThemeOptions = (
           },
         },
       },
+      MuiCardHeader: {
+        styleOverrides: {
+          root: {
+            paddingBottom: parsePx(tokens.spacing[1]),
+          },
+        },
+      },
+      MuiCardContent: {
+        styleOverrides: {
+          root: {
+            paddingTop: 0,
+            '&:last-child': {
+              paddingBottom: parsePx(tokens.spacing[4]),
+            },
+          },
+        },
+      },
       // IconButton styling
       MuiIconButton: {
         styleOverrides: {
diff --git a/formulus-formplayer/src/types/FormulusInterfaceDefinition.ts b/formulus-formplayer/src/types/FormulusInterfaceDefinition.ts
index 7495db379..5dfa73e94 100644
--- a/formulus-formplayer/src/types/FormulusInterfaceDefinition.ts
+++ b/formulus-formplayer/src/types/FormulusInterfaceDefinition.ts
@@ -478,6 +478,23 @@ export interface FormulusInterface {
    */
   requestLocation(fieldId: string): Promise<LocationResult>;
 
+  /**
+   * Return the best cached device fix (if any) without forcing a new GPS read.
+   * @param fieldId Optional field id for parity with `requestLocation`
+   */
+  getCachedLocation(fieldId?: string): Promise<LocationResult | null>;
+
+  /**
+   * Subscribe to location updates while the custom app WebView is active.
+   * Updates arrive as `locationWatchUpdate` window messages.
+   */
+  watchLocation(
+    fieldId: string,
+  ): Promise<{ status: 'started' | 'error'; message?: string }>;
+
+  /** Stop a prior `watchLocation` subscription for `fieldId`. */
+  stopWatchLocation(fieldId: string): Promise<void>;
+
   /**
    * Request file selection for a field
    * @param {string} fieldId - The ID of the field
diff --git a/formulus-formplayer/src/utils/autoSequence.test.ts b/formulus-formplayer/src/utils/autoSequence.test.ts
new file mode 100644
index 000000000..3b5c3bf5b
--- /dev/null
+++ b/formulus-formplayer/src/utils/autoSequence.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest';
+import { applyAutoSequences } from './autoSequence';
+
+describe('applyAutoSequences', () => {
+  it('assigns sibling max+1 in an array', () => {
+    const schema = {
+      properties: {
+        camas: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              cama_num: {
+                type: 'integer',
+                'x-autoSequence': { scope: 'sibling' },
+              },
+            },
+          },
+        },
+      },
+    };
+
+    const data = {
+      camas: [{ cama_num: 1 }, { cama_num: null }, {}],
+    };
+
+    const { data: next, mutated } = applyAutoSequences(data, schema);
+    expect(mutated).toBe(true);
+    expect(next.camas[1].cama_num).toBe(2);
+    expect(next.camas[2].cama_num).toBe(3);
+  });
+
+  it('does not overwrite existing values when immutable', () => {
+    const schema = {
+      properties: {
+        quarto_num: {
+          type: 'integer',
+          'x-autoSequence': { scope: 'tree' },
+        },
+      },
+    };
+
+    const data = { quarto_num: 5 };
+    const { data: next, mutated } = applyAutoSequences(data, schema);
+    expect(mutated).toBe(false);
+    expect(next.quarto_num).toBe(5);
+  });
+
+  it('uses contextTree for household numbering', () => {
+    const schema = {
+      properties: {
+        nopessoa: {
+          type: 'string',
+          'x-autoSequence': {
+            scope: 'contextTree',
+            contextKey: 'quartos',
+            field: 'nopessoa',
+          },
+        },
+      },
+    };
+
+    const data = { nopessoa: '' };
+    const { data: next } = applyAutoSequences(data, schema, {
+      subObservationContext: {
+        quartos: [
+          {
+            quarto_num: 1,
+            camas: [{ cama_num: 1, pessoas: [{ nopessoa: '3' }] }],
+          },
+        ],
+      },
+    });
+
+    expect(next.nopessoa).toBe(4);
+  });
+});
diff --git a/formulus-formplayer/src/utils/autoSequence.ts b/formulus-formplayer/src/utils/autoSequence.ts
new file mode 100644
index 000000000..2a333aeda
--- /dev/null
+++ b/formulus-formplayer/src/utils/autoSequence.ts
@@ -0,0 +1,261 @@
+/**
+ * Platform `x-autoSequence` — assign max+1 sequence integers when blank; optional immutability.
+ */
+
+import type { JsonSchema7 } from '@jsonforms/core';
+
+export type AutoSequenceConfig = {
+  assign?: 'max+1';
+  immutable?: boolean;
+  scope?: 'sibling' | 'tree' | 'contextTree';
+  contextKey?: string;
+  contextFilter?: Record<string, string>;
+  field?: string;
+};
+
+export type AutoSequenceRuntimeContext = {
+  subObservationContext?: Record<string, unknown> | null;
+  sessionContext?: Record<string, unknown> | null;
+};
+
+type Binding = {
+  field: string;
+  config: AutoSequenceConfig;
+  /** Path to parent object; `*` = each array index */
+  parentSegments: string[];
+};
+
+function isBlankSequenceValue(value: unknown): boolean {
+  if (value === undefined || value === null || value === '') return true;
+  const n = Number(value);
+  return !Number.isFinite(n) || n <= 0;
+}
+
+function toPosInt(value: unknown): number | null {
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? Math.floor(n) : null;
+}
+
+function resolveFilterToken(
+  token: string,
+  data: Record<string, unknown>,
+): unknown {
+  if (token.startsWith('$data.')) {
+    return data[token.slice('$data.'.length)];
+  }
+  return data[token];
+}
+
+function nodeMatchesFilter(
+  node: Record<string, unknown>,
+  filter: Record<string, string> | undefined,
+  data: Record<string, unknown>,
+): boolean {
+  if (!filter) return true;
+  for (const [nodeKey, token] of Object.entries(filter)) {
+    if (node[nodeKey] !== resolveFilterToken(token, data)) return false;
+  }
+  return true;
+}
+
+function collectFieldValues(
+  node: unknown,
+  fieldName: string,
+  filter: Record<string, string> | undefined,
+  data: Record<string, unknown>,
+  out: number[],
+): void {
+  if (node == null) return;
+  if (Array.isArray(node)) {
+    for (const item of node) {
+      collectFieldValues(item, fieldName, filter, data, out);
+    }
+    return;
+  }
+  if (typeof node !== 'object') return;
+
+  const obj = node as Record<string, unknown>;
+  if (!nodeMatchesFilter(obj, filter, data)) return;
+
+  if (Object.prototype.hasOwnProperty.call(obj, fieldName)) {
+    const n = toPosInt(obj[fieldName]);
+    if (n != null) out.push(n);
+  }
+
+  for (const value of Object.values(obj)) {
+    if (value && typeof value === 'object') {
+      collectFieldValues(value, fieldName, undefined, data, out);
+    }
+  }
+}
+
+function maxFromValues(values: number[]): number {
+  return values.length === 0 ? 0 : Math.max(...values);
+}
+
+function computeNextValue(
+  binding: Binding,
+  data: Record<string, unknown>,
+  runtime: AutoSequenceRuntimeContext,
+): number {
+  const fieldName = binding.config.field ?? binding.field;
+  const values: number[] = [];
+  const scope = binding.config.scope ?? 'sibling';
+
+  if (scope === 'sibling') {
+    const parent = resolveParentObject(data, binding.parentSegments);
+    if (Array.isArray(parent)) {
+      for (const item of parent) {
+        if (item && typeof item === 'object') {
+          const n = toPosInt((item as Record<string, unknown>)[fieldName]);
+          if (n != null) values.push(n);
+        }
+      }
+    }
+  } else if (scope === 'contextTree') {
+    const contextKey = binding.config.contextKey ?? 'quartos';
+    const subCtx =
+      runtime.subObservationContext ??
+      (runtime.sessionContext?.subObservation as Record<
+        string,
+        unknown
+      > | null);
+    collectFieldValues(
+      subCtx?.[contextKey],
+      fieldName,
+      binding.config.contextFilter,
+      data,
+      values,
+    );
+    collectFieldValues(
+      data,
+      fieldName,
+      binding.config.contextFilter,
+      data,
+      values,
+    );
+  } else {
+    collectFieldValues(
+      data,
+      fieldName,
+      binding.config.contextFilter,
+      data,
+      values,
+    );
+  }
+
+  return maxFromValues(values) + 1;
+}
+
+function collectBindings(
+  schema: JsonSchema7 | undefined,
+  parentSegments: string[] = [],
+): Binding[] {
+  if (!schema || typeof schema !== 'object') return [];
+
+  const bindings: Binding[] = [];
+  const props = schema.properties;
+  if (props) {
+    for (const [name, childSchema] of Object.entries(props)) {
+      const child = childSchema as JsonSchema7;
+      const seq = (child as Record<string, unknown>)['x-autoSequence'] as
+        | AutoSequenceConfig
+        | undefined;
+      if (seq && typeof seq === 'object') {
+        bindings.push({
+          field: name,
+          parentSegments,
+          config: {
+            assign: 'max+1',
+            immutable: true,
+            scope: 'sibling',
+            ...seq,
+            field: seq.field ?? name,
+          },
+        });
+      }
+      bindings.push(...collectBindings(child, [...parentSegments, name]));
+    }
+  }
+
+  if (schema.items && typeof schema.items === 'object') {
+    bindings.push(
+      ...collectBindings(schema.items as JsonSchema7, [...parentSegments, '*']),
+    );
+  }
+
+  return bindings;
+}
+
+function resolveParentObject(
+  data: Record<string, unknown>,
+  segments: string[],
+): unknown {
+  let cur: unknown = data;
+  for (const segment of segments) {
+    if (segment === '*') return cur;
+    if (cur == null || typeof cur !== 'object') return undefined;
+    cur = (cur as Record<string, unknown>)[segment];
+  }
+  return cur;
+}
+
+type ParentRef = { parent: Record<string, unknown> };
+
+function enumerateParents(
+  data: Record<string, unknown>,
+  segments: string[],
+): ParentRef[] {
+  if (segments.length === 0) return [{ parent: data }];
+
+  const [head, ...tail] = segments;
+  if (head === '*') {
+    if (!Array.isArray(data)) return [];
+    const out: ParentRef[] = [];
+    for (const item of data) {
+      if (item && typeof item === 'object') {
+        out.push(...enumerateParents(item as Record<string, unknown>, tail));
+      }
+    }
+    return out;
+  }
+
+  const next = data[head];
+  if (next == null || typeof next !== 'object') return [];
+  if (tail.length === 0) {
+    return [{ parent: next as Record<string, unknown> }];
+  }
+  return enumerateParents(next as Record<string, unknown>, tail);
+}
+
+/** Apply all `x-autoSequence` rules in `schema` to a shallow-cloned `data` when needed. */
+export function applyAutoSequences(
+  data: Record<string, unknown>,
+  schema: JsonSchema7 | undefined,
+  runtime: AutoSequenceRuntimeContext = {},
+): { data: Record<string, unknown>; mutated: boolean } {
+  if (!schema) return { data, mutated: false };
+
+  const bindings = collectBindings(schema, []);
+  if (bindings.length === 0) return { data, mutated: false };
+
+  const working = structuredClone(data);
+  let mutated = false;
+
+  for (const binding of bindings) {
+    const immutable = binding.config.immutable !== false;
+    const fieldName = binding.field;
+    const parentRefs = enumerateParents(working, binding.parentSegments);
+
+    for (const { parent } of parentRefs) {
+      const current = parent[fieldName];
+      if (immutable && !isBlankSequenceValue(current)) continue;
+      if (!isBlankSequenceValue(current)) continue;
+
+      parent[fieldName] = computeNextValue(binding, working, runtime);
+      mutated = true;
+    }
+  }
+
+  return { data: mutated ? working : data, mutated };
+}
diff --git a/formulus-formplayer/src/utils/errorPageNavigation.test.ts b/formulus-formplayer/src/utils/errorPageNavigation.test.ts
new file mode 100644
index 000000000..2a93b1cc0
--- /dev/null
+++ b/formulus-formplayer/src/utils/errorPageNavigation.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest';
+import {
+  findSwipePageIndexForInstancePath,
+  formatBlockingErrorSummary,
+  instancePathMatchesControlScope,
+  normalizeErrorInstancePath,
+  resolveErrorPageIndex,
+} from './errorPageNavigation';
+
+const nestedGroupLayout = {
+  type: 'SwipeLayout',
+  options: { headerFields: ['cama_num'] },
+  elements: [
+    {
+      type: 'Group',
+      label: 'Page 1',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/validar_cama',
+          label: 'A cama é válida',
+        },
+      ],
+    },
+    {
+      type: 'Group',
+      label: 'Page 2',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/viutenda',
+          label: 'Viu/tem tenda?',
+        },
+      ],
+    },
+    { type: 'Finalize' },
+  ],
+};
+
+describe('normalizeErrorInstancePath', () => {
+  it('converts custom validator JSON pointer paths', () => {
+    expect(normalizeErrorInstancePath('#/properties/validar_cama')).toBe(
+      '/validar_cama',
+    );
+  });
+
+  it('leaves AJV instance paths unchanged', () => {
+    expect(normalizeErrorInstancePath('/pessoas/0/sexo')).toBe(
+      '/pessoas/0/sexo',
+    );
+  });
+});
+
+describe('instancePathMatchesControlScope', () => {
+  it('matches root property scopes', () => {
+    expect(
+      instancePathMatchesControlScope(
+        '/validar_cama',
+        '#/properties/validar_cama',
+      ),
+    ).toBe(true);
+  });
+
+  it('matches nested array item scopes', () => {
+    expect(
+      instancePathMatchesControlScope(
+        '/pessoas/0/sexo',
+        '#/properties/pessoas/items/properties/sexo',
+      ),
+    ).toBe(true);
+  });
+});
+
+describe('findSwipePageIndexForInstancePath', () => {
+  const layouts = nestedGroupLayout.elements;
+
+  it('finds controls nested inside Group pages', () => {
+    expect(
+      findSwipePageIndexForInstancePath(layouts, '/validar_cama', []),
+    ).toBe(0);
+    expect(findSwipePageIndexForInstancePath(layouts, '/viutenda', [])).toBe(1);
+  });
+
+  it('routes header-only fields to the first content page', () => {
+    expect(
+      findSwipePageIndexForInstancePath(layouts, '/cama_num', ['cama_num']),
+    ).toBe(0);
+  });
+});
+
+describe('resolveErrorPageIndex', () => {
+  it('resolves page index from SwipeLayout uischema', () => {
+    expect(
+      resolveErrorPageIndex(nestedGroupLayout as never, '/validar_cama'),
+    ).toBe(0);
+  });
+});
+
+describe('formatBlockingErrorSummary', () => {
+  const schema = {
+    properties: {
+      validar_cama: { type: 'string', title: 'A cama é válida' },
+      viutenda: { type: 'string', title: 'Viu/tem tenda?' },
+    },
+  };
+
+  it('includes field titles in the alert copy', () => {
+    const message = formatBlockingErrorSummary(
+      [{ instancePath: '/validar_cama' }],
+      schema,
+    );
+    expect(message).toContain('A cama é válida');
+    expect(message).toContain('Tap Done to review');
+  });
+});
diff --git a/formulus-formplayer/src/utils/errorPageNavigation.ts b/formulus-formplayer/src/utils/errorPageNavigation.ts
new file mode 100644
index 000000000..333b41187
--- /dev/null
+++ b/formulus-formplayer/src/utils/errorPageNavigation.ts
@@ -0,0 +1,225 @@
+/**
+ * Map AJV / custom-validator instance paths to SwipeLayout page indices.
+ */
+
+import {
+  isControl,
+  type JsonSchema7,
+  type UISchemaElement,
+} from '@jsonforms/core';
+import type { BlockingValidationError } from './validationNavigation';
+
+function escapeRegex(segment: string): string {
+  return segment.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/** `#/properties/a/items/properties/b` → regex matching `/a/0/b`. */
+export function scopeToInstancePathRegex(scope: string): RegExp | null {
+  if (!scope?.startsWith('#/')) return null;
+
+  const parts = scope.replace(/^#\//, '').split('/');
+  const segments: string[] = [];
+
+  for (const part of parts) {
+    if (part === 'properties') continue;
+    if (part === 'items') {
+      segments.push('\\d+');
+      continue;
+    }
+    segments.push(escapeRegex(part));
+  }
+
+  if (segments.length === 0) return null;
+  return new RegExp(`^/${segments.join('/')}(/|$)`);
+}
+
+/** Convert `#/properties/foo` or AJV `/foo` to a comparable instance path. */
+export function normalizeErrorInstancePath(path: string): string {
+  if (!path) return '';
+  if (path.startsWith('#/properties/')) {
+    const tail = path
+      .replace(/^#\/properties\//, '')
+      .replace(/\/items\/properties\//g, '/')
+      .replace(/\/items$/, '');
+    return `/${tail}`;
+  }
+  return path.startsWith('/') ? path : `/${path}`;
+}
+
+export function instancePathMatchesControlScope(
+  instancePath: string,
+  scope: string | undefined,
+): boolean {
+  if (!scope) return false;
+  const normalized = normalizeErrorInstancePath(instancePath);
+  const regex = scopeToInstancePathRegex(scope);
+  if (regex?.test(normalized)) return true;
+
+  const leaf = normalized.split('/').filter(Boolean).pop();
+  if (!leaf || /^\d+$/.test(leaf)) return false;
+  return scope.includes(leaf);
+}
+
+export function collectControlsInSubtree(
+  root: UISchemaElement,
+): Array<{ scope: string }> {
+  const controls: Array<{ scope: string }> = [];
+
+  function walk(el: UISchemaElement) {
+    if (isControl(el)) {
+      const scope = (el as { scope?: string }).scope;
+      if (scope) controls.push({ scope });
+      return;
+    }
+    const children = (el as { elements?: UISchemaElement[] }).elements;
+    if (!Array.isArray(children)) return;
+    for (const child of children) walk(child);
+  }
+
+  walk(root);
+  return controls;
+}
+
+export function getSwipeLayoutPages(
+  uischema: UISchemaElement | null | undefined,
+): { layouts: UISchemaElement[]; headerFields: string[] } {
+  if (!uischema) return { layouts: [], headerFields: [] };
+
+  const typed = uischema as {
+    type?: string;
+    elements?: UISchemaElement[];
+    options?: { headerFields?: string[] };
+  };
+
+  if (typed.type === 'SwipeLayout' && Array.isArray(typed.elements)) {
+    return {
+      layouts: typed.elements,
+      headerFields: (typed.options?.headerFields ?? []).slice(0, 2),
+    };
+  }
+
+  if (typed.type === 'Group') {
+    return { layouts: [uischema], headerFields: [] };
+  }
+
+  return { layouts: [], headerFields: [] };
+}
+
+/**
+ * Shallowest swipe page index containing a control for `instancePath`, or null.
+ */
+export function findSwipePageIndexForInstancePath(
+  layouts: UISchemaElement[],
+  instancePath: string,
+  headerFields: string[] = [],
+): number | null {
+  const normalized = normalizeErrorInstancePath(instancePath);
+  const topLevelField = normalized
+    .replace(/^\//, '')
+    .split('/')
+    .find(segment => segment && !/^\d+$/.test(segment));
+
+  if (topLevelField && headerFields.includes(topLevelField)) {
+    const firstContent = layouts.findIndex(
+      page => (page as { type?: string }).type !== 'Finalize',
+    );
+    return firstContent >= 0 ? firstContent : null;
+  }
+
+  for (let i = 0; i < layouts.length; i++) {
+    const page = layouts[i];
+    if ((page as { type?: string }).type === 'Finalize') continue;
+
+    const controls = collectControlsInSubtree(page);
+    if (
+      controls.some(({ scope }) =>
+        instancePathMatchesControlScope(normalized, scope),
+      )
+    ) {
+      return i;
+    }
+  }
+
+  return null;
+}
+
+export function resolveErrorPageIndex(
+  uischema: UISchemaElement | null | undefined,
+  errorPath: string,
+): number | null {
+  const { layouts, headerFields } = getSwipeLayoutPages(uischema);
+  if (layouts.length === 0) return null;
+  return findSwipePageIndexForInstancePath(layouts, errorPath, headerFields);
+}
+
+function titleAtSchemaPath(
+  schema: JsonSchema7 | undefined,
+  propertyPath: string[],
+): string | null {
+  if (!schema || propertyPath.length === 0) return null;
+
+  let current: JsonSchema7 | undefined = schema;
+  for (const part of propertyPath) {
+    if (!current) return null;
+    if (current.properties?.[part]) {
+      current = current.properties[part] as JsonSchema7;
+      continue;
+    }
+    if (current.items && typeof current.items === 'object') {
+      current = current.items as JsonSchema7;
+      if (current.properties?.[part]) {
+        current = current.properties[part] as JsonSchema7;
+        continue;
+      }
+    }
+    return part;
+  }
+
+  return (
+    (current as { title?: string })?.title ??
+    propertyPath[propertyPath.length - 1] ??
+    null
+  );
+}
+
+export function titleForErrorPath(
+  errorPath: string,
+  schema: JsonSchema7 | undefined,
+): string | null {
+  const normalized = normalizeErrorInstancePath(errorPath);
+  const propertyPath = normalized
+    .split('/')
+    .filter(segment => segment && !/^\d+$/.test(segment));
+  return titleAtSchemaPath(schema, propertyPath);
+}
+
+/** Human-readable summary for skipFinalize Done alert (field titles, not count only). */
+export function formatBlockingErrorSummary(
+  errors: ReadonlyArray<BlockingValidationError & { message?: string }>,
+  schema: JsonSchema7 | undefined,
+  maxTitles = 3,
+): string {
+  if (errors.length === 0) return '';
+
+  const titles: string[] = [];
+  for (const err of errors) {
+    const path =
+      err.instancePath ?? (typeof err.path === 'string' ? err.path : undefined);
+    const title = path ? titleForErrorPath(path, schema) : null;
+    const label = title || err.message;
+    if (label && !titles.includes(label)) titles.push(label);
+    if (titles.length >= maxTitles) break;
+  }
+
+  const remaining = errors.length - titles.length;
+  const joined = titles.join(', ');
+  const suffix = remaining > 0 ? ` (+${remaining} more)` : '';
+  const countPhrase =
+    errors.length === 1 ? '1 field needs' : `${errors.length} fields need`;
+
+  if (joined) {
+    return `${countPhrase} attention: ${joined}${suffix}. Tap Done to review.`;
+  }
+
+  return `${countPhrase} attention. Tap Done to review.`;
+}
diff --git a/formulus-formplayer/src/utils/keyboardScroll.test.ts b/formulus-formplayer/src/utils/keyboardScroll.test.ts
new file mode 100644
index 000000000..f06e36ef8
--- /dev/null
+++ b/formulus-formplayer/src/utils/keyboardScroll.test.ts
@@ -0,0 +1,125 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import {
+  clampScrollTop,
+  computeScrollDeltaForField,
+  isFieldObscuredInContainer,
+  revealFieldIfNeeded,
+} from './keyboardScroll';
+
+describe('isFieldObscuredInContainer', () => {
+  it('returns false when field is fully inside visible band', () => {
+    const container = { top: 0, bottom: 400 };
+    const field = { top: 100, bottom: 150 };
+    expect(isFieldObscuredInContainer(container, field)).toBe(false);
+  });
+
+  it('returns true when field bottom is below visible area', () => {
+    const container = { top: 0, bottom: 200 };
+    const field = { top: 150, bottom: 250 };
+    expect(isFieldObscuredInContainer(container, field)).toBe(true);
+  });
+
+  it('returns true when field top is above visible area', () => {
+    const container = { top: 100, bottom: 400 };
+    const field = { top: 50, bottom: 120 };
+    expect(isFieldObscuredInContainer(container, field)).toBe(true);
+  });
+});
+
+describe('computeScrollDeltaForField', () => {
+  it('returns positive delta when field extends below container', () => {
+    const container = { top: 0, bottom: 200 };
+    const field = { top: 150, bottom: 230 };
+    expect(computeScrollDeltaForField(container, field, 8, 16)).toBe(46);
+  });
+
+  it('returns negative delta when field extends above container', () => {
+    const container = { top: 100, bottom: 400 };
+    const field = { top: 90, bottom: 150 };
+    expect(computeScrollDeltaForField(container, field, 8, 16)).toBe(-18);
+  });
+
+  it('returns zero when field is visible', () => {
+    const container = { top: 0, bottom: 300 };
+    const field = { top: 50, bottom: 100 };
+    expect(computeScrollDeltaForField(container, field)).toBe(0);
+  });
+});
+
+describe('revealFieldIfNeeded', () => {
+  it('does not scroll when field is already visible', () => {
+    const container = document.createElement('div');
+    Object.defineProperty(container, 'scrollTop', { value: 0, writable: true });
+    Object.defineProperty(container, 'scrollHeight', { value: 500 });
+    Object.defineProperty(container, 'clientHeight', { value: 300 });
+    container.getBoundingClientRect = () =>
+      ({
+        top: 0,
+        bottom: 300,
+        left: 0,
+        right: 100,
+        width: 100,
+        height: 300,
+      }) as DOMRect;
+
+    const field = document.createElement('input');
+    container.appendChild(field);
+    field.getBoundingClientRect = () =>
+      ({
+        top: 50,
+        bottom: 80,
+        left: 0,
+        right: 100,
+        width: 100,
+        height: 30,
+      }) as DOMRect;
+
+    const changed = revealFieldIfNeeded(container, field);
+    expect(changed).toBe(false);
+    expect(container.scrollTop).toBe(0);
+  });
+
+  it('scrolls down when field bottom is below container', () => {
+    const container = document.createElement('div');
+    let scrollTop = 0;
+    Object.defineProperty(container, 'scrollTop', {
+      get: () => scrollTop,
+      set: (v: number) => {
+        scrollTop = v;
+      },
+    });
+    Object.defineProperty(container, 'scrollHeight', { value: 800 });
+    Object.defineProperty(container, 'clientHeight', { value: 300 });
+    container.getBoundingClientRect = () =>
+      ({
+        top: 0,
+        bottom: 300,
+        left: 0,
+        right: 100,
+        width: 100,
+        height: 300,
+      }) as DOMRect;
+
+    const field = document.createElement('input');
+    container.appendChild(field);
+    field.getBoundingClientRect = () =>
+      ({
+        top: 250,
+        bottom: 320,
+        left: 0,
+        right: 100,
+        width: 100,
+        height: 70,
+      }) as DOMRect;
+
+    const changed = revealFieldIfNeeded(container, field, {
+      marginBottom: 16,
+      marginTop: 8,
+    });
+    expect(changed).toBe(true);
+    expect(scrollTop).toBeGreaterThan(0);
+    clampScrollTop(container);
+    expect(scrollTop).toBeLessThanOrEqual(500);
+  });
+});
diff --git a/formulus-formplayer/src/utils/keyboardScroll.ts b/formulus-formplayer/src/utils/keyboardScroll.ts
new file mode 100644
index 000000000..9da148575
--- /dev/null
+++ b/formulus-formplayer/src/utils/keyboardScroll.ts
@@ -0,0 +1,101 @@
+/** DOM rect subset used for scroll calculations. */
+export interface FieldRect {
+  top: number;
+  bottom: number;
+}
+
+/** Prevent scrolling past the last real content row inside the form scroll area. */
+export function clampScrollTop(el: HTMLElement): void {
+  const max = Math.max(0, el.scrollHeight - el.clientHeight);
+  if (el.scrollTop > max) {
+    el.scrollTop = max;
+  }
+}
+
+/**
+ * True when the field is not fully visible inside the scroll container's client
+ * area (with optional margins for sticky header / nav bar).
+ */
+export function isFieldObscuredInContainer(
+  containerRect: FieldRect & { height?: number },
+  fieldRect: FieldRect,
+  marginTop = 8,
+  marginBottom = 16,
+): boolean {
+  const visibleTop = containerRect.top + marginTop;
+  const visibleBottom =
+    containerRect.bottom !== undefined
+      ? containerRect.bottom - marginBottom
+      : containerRect.top + (containerRect.height ?? 0) - marginBottom;
+
+  return fieldRect.bottom > visibleBottom || fieldRect.top < visibleTop;
+}
+
+/**
+ * Minimal scroll delta (px) to bring `fieldRect` into the container's visible band.
+ * Positive = scroll down, negative = scroll up. Zero when already visible.
+ */
+export function computeScrollDeltaForField(
+  containerRect: FieldRect,
+  fieldRect: FieldRect,
+  marginTop = 8,
+  marginBottom = 16,
+): number {
+  const visibleTop = containerRect.top + marginTop;
+  const visibleBottom = containerRect.bottom - marginBottom;
+
+  if (fieldRect.bottom > visibleBottom) {
+    return fieldRect.bottom - visibleBottom;
+  }
+  if (fieldRect.top < visibleTop) {
+    return fieldRect.top - visibleTop;
+  }
+  return 0;
+}
+
+export interface RevealFieldOptions {
+  marginTop?: number;
+  marginBottom?: number;
+}
+
+/**
+ * Scroll the container only enough to reveal `field` when obscured.
+ * Uses manual scrollTop adjustment (not scrollIntoView) to avoid WebView gaps.
+ * @returns true when scroll position changed
+ */
+export function revealFieldIfNeeded(
+  container: HTMLElement,
+  field: HTMLElement,
+  options: RevealFieldOptions = {},
+): boolean {
+  const marginTop = options.marginTop ?? 8;
+  const marginBottom = options.marginBottom ?? 16;
+
+  const containerRect = container.getBoundingClientRect();
+  const fieldRect = field.getBoundingClientRect();
+
+  if (
+    !isFieldObscuredInContainer(
+      containerRect,
+      fieldRect,
+      marginTop,
+      marginBottom,
+    )
+  ) {
+    return false;
+  }
+
+  const delta = computeScrollDeltaForField(
+    containerRect,
+    fieldRect,
+    marginTop,
+    marginBottom,
+  );
+
+  if (delta !== 0) {
+    container.scrollTop += delta;
+  }
+
+  clampScrollTop(container);
+  return delta !== 0;
+}
diff --git a/formulus-formplayer/vite.config.ts b/formulus-formplayer/vite.config.ts
index 002ceea53..043c3525c 100644
--- a/formulus-formplayer/vite.config.ts
+++ b/formulus-formplayer/vite.config.ts
@@ -75,5 +75,6 @@ export default defineConfig({
 
   test: {
     environment: 'node',
+    setupFiles: ['./src/setupTests.ts'],
   },
 });
diff --git a/formulus/App.tsx b/formulus/App.tsx
index db38f8280..58fdafba2 100644
--- a/formulus/App.tsx
+++ b/formulus/App.tsx
@@ -20,6 +20,7 @@ import FormplayerModal, {
   FormplayerModalHandle,
 } from './src/components/FormplayerModal';
 import QRScannerModal from './src/components/QRScannerModal';
+import { qrcodeRequestCoordinator } from './src/services/QrcodeRequestCoordinator';
 import SignatureCaptureModal from './src/components/SignatureCaptureModal';
 import MainAppNavigator from './src/navigation/MainAppNavigator';
 import { FormInitData } from './src/webview/FormulusInterfaceDefinition.ts';
@@ -286,6 +287,7 @@ function AppInner(): React.JSX.Element {
       <QRScannerModal
         visible={qrScannerVisible}
         onClose={() => {
+          qrcodeRequestCoordinator.cancel(qrScannerData?.fieldId);
           setQrScannerVisible(false);
           setQrScannerData(null);
         }}
diff --git a/formulus/assets/webview/FormulusInjectionScript.js b/formulus/assets/webview/FormulusInjectionScript.js
index e4453f216..295b421a1 100644
--- a/formulus/assets/webview/FormulusInjectionScript.js
+++ b/formulus/assets/webview/FormulusInjectionScript.js
@@ -664,6 +664,182 @@
       });
     },
 
+    // getCachedLocation: fieldId?: string => Promise<LocationResult | null>
+    getCachedLocation: function (fieldId) {
+      return new Promise((resolve, reject) => {
+        const messageId =
+          'msg_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
+
+        const callback = event => {
+          try {
+            let data;
+            if (typeof event.data === 'string') {
+              data = JSON.parse(event.data);
+            } else if (typeof event.data === 'object' && event.data !== null) {
+              data = event.data;
+            } else {
+              window.removeEventListener('message', callback);
+              reject(new Error('getCachedLocation: unexpected response'));
+              return;
+            }
+            if (
+              data.type === 'getCachedLocation_response' &&
+              data.messageId === messageId
+            ) {
+              window.removeEventListener('message', callback);
+              if (data.error) {
+                reject(new Error(data.error));
+              } else {
+                resolve(data.result);
+              }
+            }
+          } catch (e) {
+            window.removeEventListener('message', callback);
+            reject(e);
+          }
+        };
+        window.addEventListener('message', callback);
+
+        globalThis.ReactNativeWebView.postMessage(
+          JSON.stringify({
+            type: 'getCachedLocation',
+            messageId,
+            fieldId: fieldId,
+          }),
+        );
+      });
+    },
+
+    // watchLocation: fieldId => Promise<{ status, message? }>
+    watchLocation: function (fieldId) {
+      return new Promise((resolve, reject) => {
+        const messageId =
+          'msg_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
+
+        const updateHandler = event => {
+          try {
+            let data;
+            if (typeof event.data === 'string') {
+              data = JSON.parse(event.data);
+            } else if (typeof event.data === 'object' && event.data !== null) {
+              data = event.data;
+            } else {
+              return;
+            }
+            if (
+              data.type === 'locationWatchUpdate' &&
+              data.fieldId === fieldId
+            ) {
+              window.dispatchEvent(
+                new CustomEvent('formulusLocationUpdate', {
+                  detail: { fieldId, result: data.result },
+                }),
+              );
+            }
+          } catch {
+            /* ignore malformed push */
+          }
+        };
+        window.addEventListener('message', updateHandler);
+        if (!globalThis.__formulusLocationWatchHandlers) {
+          globalThis.__formulusLocationWatchHandlers = {};
+        }
+        globalThis.__formulusLocationWatchHandlers[fieldId] = updateHandler;
+
+        const callback = event => {
+          try {
+            let data;
+            if (typeof event.data === 'string') {
+              data = JSON.parse(event.data);
+            } else if (typeof event.data === 'object' && event.data !== null) {
+              data = event.data;
+            } else {
+              window.removeEventListener('message', callback);
+              reject(new Error('watchLocation: unexpected response'));
+              return;
+            }
+            if (
+              data.type === 'watchLocation_response' &&
+              data.messageId === messageId
+            ) {
+              window.removeEventListener('message', callback);
+              if (data.error) {
+                window.removeEventListener('message', updateHandler);
+                delete globalThis.__formulusLocationWatchHandlers[fieldId];
+                reject(new Error(data.error));
+              } else {
+                resolve(data.result);
+              }
+            }
+          } catch (e) {
+            window.removeEventListener('message', callback);
+            reject(e);
+          }
+        };
+        window.addEventListener('message', callback);
+
+        globalThis.ReactNativeWebView.postMessage(
+          JSON.stringify({
+            type: 'watchLocation',
+            messageId,
+            fieldId: fieldId,
+          }),
+        );
+      });
+    },
+
+    // stopWatchLocation: fieldId => Promise<void>
+    stopWatchLocation: function (fieldId) {
+      return new Promise((resolve, reject) => {
+        const messageId =
+          'msg_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
+
+        const callback = event => {
+          try {
+            let data;
+            if (typeof event.data === 'string') {
+              data = JSON.parse(event.data);
+            } else if (typeof event.data === 'object' && event.data !== null) {
+              data = event.data;
+            } else {
+              window.removeEventListener('message', callback);
+              reject(new Error('stopWatchLocation: unexpected response'));
+              return;
+            }
+            if (
+              data.type === 'stopWatchLocation_response' &&
+              data.messageId === messageId
+            ) {
+              window.removeEventListener('message', callback);
+              const handler =
+                globalThis.__formulusLocationWatchHandlers?.[fieldId];
+              if (handler) {
+                window.removeEventListener('message', handler);
+                delete globalThis.__formulusLocationWatchHandlers[fieldId];
+              }
+              if (data.error) {
+                reject(new Error(data.error));
+              } else {
+                resolve(data.result);
+              }
+            }
+          } catch (e) {
+            window.removeEventListener('message', callback);
+            reject(e);
+          }
+        };
+        window.addEventListener('message', callback);
+
+        globalThis.ReactNativeWebView.postMessage(
+          JSON.stringify({
+            type: 'stopWatchLocation',
+            messageId,
+            fieldId: fieldId,
+          }),
+        );
+      });
+    },
+
     // requestFile: fieldId: string => Promise<FileResult>
     requestFile: function (fieldId) {
       return new Promise((resolve, reject) => {
diff --git a/formulus/package.json b/formulus/package.json
index 9ce911323..88b0fd84f 100644
--- a/formulus/package.json
+++ b/formulus/package.json
@@ -99,23 +99,5 @@
   },
   "engines": {
     "node": ">=20"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@nestjs/core",
-      "@openapitools/openapi-generator-cli",
-      "esbuild",
-      "unrs-resolver"
-    ],
-    "overrides": {
-      "jest-environment-node": "^30.4.1",
-      "jest-haste-map": "^30.4.1",
-      "jest-message-util": "^30.4.1",
-      "jest-mock": "^30.4.1",
-      "jest-regex-util": "^30.4.0",
-      "jest-util": "^30.4.1",
-      "jest-validate": "^30.4.1",
-      "jest-worker": "^30.4.1"
-    }
   }
 }
diff --git a/formulus/pnpm-workspace.yaml b/formulus/pnpm-workspace.yaml
new file mode 100644
index 000000000..4535ae0a6
--- /dev/null
+++ b/formulus/pnpm-workspace.yaml
@@ -0,0 +1,17 @@
+# pnpm 10+ reads project settings here (not package.json#pnpm).
+# Allow lifecycle scripts only for these native/tooling deps.
+onlyBuiltDependencies:
+  - '@nestjs/core'
+  - '@openapitools/openapi-generator-cli'
+  - esbuild
+  - unrs-resolver
+
+overrides:
+  jest-environment-node: ^30.4.1
+  jest-haste-map: ^30.4.1
+  jest-message-util: ^30.4.1
+  jest-mock: ^30.4.1
+  jest-regex-util: ^30.4.0
+  jest-util: ^30.4.1
+  jest-validate: ^30.4.1
+  jest-worker: ^30.4.1
diff --git a/formulus/src/components/CustomAppWebView.tsx b/formulus/src/components/CustomAppWebView.tsx
index af2bc2285..02cc3e4fc 100644
--- a/formulus/src/components/CustomAppWebView.tsx
+++ b/formulus/src/components/CustomAppWebView.tsx
@@ -14,6 +14,7 @@ import { useIsFocused } from '@react-navigation/native';
 import { Platform } from 'react-native';
 import { readFileAssets, MainBundlePath, readFile } from 'react-native-fs';
 import { FormulusWebViewMessageManager } from '../webview/FormulusWebViewHandler';
+import { appEvents, Listener } from '../webview/FormulusMessageHandlers';
 import { FormInitData } from '../webview/FormulusInterfaceDefinition';
 import { colors } from '../theme/colors';
 import { loadSettingsHydrationFromStorage } from '../services/SettingsHydrationCache';
@@ -319,6 +320,36 @@ const CustomAppWebView = forwardRef<
       return manager;
     }, [appName]);
 
+    useEffect(() => {
+      const onLocationUpdate = (payload: {
+        fieldId: string;
+        location: Record<string, unknown>;
+      }) => {
+        if (!webViewRef.current) return;
+        webViewRef.current.postMessage(
+          JSON.stringify({
+            type: 'locationWatchUpdate',
+            fieldId: payload.fieldId,
+            result: {
+              fieldId: payload.fieldId,
+              status: 'success',
+              data: payload.location,
+            },
+          }),
+        );
+      };
+      appEvents.addListener(
+        'locationWatchUpdate',
+        onLocationUpdate as Listener,
+      );
+      return () => {
+        appEvents.removeListener(
+          'locationWatchUpdate',
+          onLocationUpdate as Listener,
+        );
+      };
+    }, []);
+
     const handleNavigationStateChange = useCallback(
       (navState: WebViewNavigation) => {
         const newCanGoBack = navState.canGoBack;
@@ -518,10 +549,10 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   webViewTransparent: {
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   webViewContainerTransparent: {
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
     flex: 1,
   },
 });
diff --git a/formulus/src/components/MenuDrawer.tsx b/formulus/src/components/MenuDrawer.tsx
index 5f802b431..11a04c129 100644
--- a/formulus/src/components/MenuDrawer.tsx
+++ b/formulus/src/components/MenuDrawer.tsx
@@ -157,7 +157,7 @@ const MenuDrawer: React.FC<MenuDrawerProps> = ({
             styles.backdrop,
             {
               // Fully transparent backdrop: no visual dimming, but still closes on tap
-              backgroundColor: 'transparent',
+              backgroundColor: colors.neutral.transparent,
               marginBottom: bottomPadding,
             },
           ]}
diff --git a/formulus/src/components/QRScannerModalImpl.tsx b/formulus/src/components/QRScannerModalImpl.tsx
index 3e40d9fb7..6ec97166a 100644
--- a/formulus/src/components/QRScannerModalImpl.tsx
+++ b/formulus/src/components/QRScannerModalImpl.tsx
@@ -208,7 +208,11 @@ const QRScannerModalImpl: React.FC<QRScannerModalProps> = ({
   }
 
   return (
-    <Modal visible={visible} animationType="slide" statusBarTranslucent>
+    <Modal
+      visible={visible}
+      animationType="slide"
+      statusBarTranslucent
+      onRequestClose={handleCancel}>
       <StatusBar barStyle="light-content" backgroundColor="black" />
       <View style={styles.container}>
         <Camera
diff --git a/formulus/src/navigation/MainAppNavigator.tsx b/formulus/src/navigation/MainAppNavigator.tsx
index 54beac2a9..2dc7be990 100644
--- a/formulus/src/navigation/MainAppNavigator.tsx
+++ b/formulus/src/navigation/MainAppNavigator.tsx
@@ -17,6 +17,7 @@ import {
   odeTypography,
   odeScreenHeaderHeight,
 } from '../theme/odeDesign';
+import colors from '../theme/colors';
 
 const Stack = createStackNavigator<MainAppStackParamList>();
 
@@ -142,7 +143,7 @@ const MainAppNavigator: React.FC = () => {
         options={{
           title: 'Observation Details',
           headerTransparent: true,
-          headerStyle: { backgroundColor: 'transparent' },
+          headerStyle: { backgroundColor: colors.neutral.transparent },
           header: props => (
             <ObservationDetailHeader
               navigation={props.navigation}
diff --git a/formulus/src/navigation/MainTabNavigator.tsx b/formulus/src/navigation/MainTabNavigator.tsx
index 13ee9128c..5b46c811b 100644
--- a/formulus/src/navigation/MainTabNavigator.tsx
+++ b/formulus/src/navigation/MainTabNavigator.tsx
@@ -325,7 +325,7 @@ const styles = StyleSheet.create({
   },
   customTabBarContainer: {
     width: '100%',
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   customTabBarRow: {
     flexDirection: 'row',
diff --git a/formulus/src/screens/AboutScreen.tsx b/formulus/src/screens/AboutScreen.tsx
index 0cd7431ca..37722564a 100644
--- a/formulus/src/screens/AboutScreen.tsx
+++ b/formulus/src/screens/AboutScreen.tsx
@@ -62,7 +62,10 @@ const AboutScreen: React.FC = () => {
   return (
     <View style={shellStyle}>
       <SafeAreaView
-        style={[styles.container, { backgroundColor: 'transparent' }]}
+        style={[
+          styles.container,
+          { backgroundColor: colors.neutral.transparent },
+        ]}
         edges={['top']}>
         <View
           style={[
@@ -207,7 +210,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollTransparent: {
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   header: {
     padding: odeSpacing.md,
@@ -245,12 +248,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginRight: 12,
     overflow: 'hidden',
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   logo: {
     width: 40,
     height: 40,
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   version: {
     marginTop: odeSpacing.xxs,
diff --git a/formulus/src/screens/FormsScreen.tsx b/formulus/src/screens/FormsScreen.tsx
index 6b639d1eb..0bf13b892 100644
--- a/formulus/src/screens/FormsScreen.tsx
+++ b/formulus/src/screens/FormsScreen.tsx
@@ -109,7 +109,10 @@ const FormsScreen: React.FC = () => {
     return (
       <View style={shellStyle}>
         <SafeAreaView
-          style={[styles.container, { backgroundColor: 'transparent' }]}>
+          style={[
+            styles.container,
+            { backgroundColor: colors.neutral.transparent },
+          ]}>
           <View style={styles.loadingContainer}>
             <ActivityIndicator size="large" color={themeColors.primary} />
             <Text
@@ -126,7 +129,10 @@ const FormsScreen: React.FC = () => {
     return (
       <View style={shellStyle}>
         <SafeAreaView
-          style={[styles.container, { backgroundColor: 'transparent' }]}>
+          style={[
+            styles.container,
+            { backgroundColor: colors.neutral.transparent },
+          ]}>
           <EmptyState
             icon="alert-circle-outline"
             title="Error Loading Forms"
@@ -142,7 +148,10 @@ const FormsScreen: React.FC = () => {
   return (
     <View style={shellStyle}>
       <SafeAreaView
-        style={[styles.container, { backgroundColor: 'transparent' }]}
+        style={[
+          styles.container,
+          { backgroundColor: colors.neutral.transparent },
+        ]}
         edges={['top']}>
         <View
           style={[
@@ -258,7 +267,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   listTransparent: {
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   header: {
     flexDirection: 'row',
diff --git a/formulus/src/screens/HelpScreen.tsx b/formulus/src/screens/HelpScreen.tsx
index 23a9c603d..6d2366aaa 100644
--- a/formulus/src/screens/HelpScreen.tsx
+++ b/formulus/src/screens/HelpScreen.tsx
@@ -79,7 +79,10 @@ const HelpScreen: React.FC = () => {
   return (
     <View style={shellStyle}>
       <SafeAreaView
-        style={[styles.container, { backgroundColor: 'transparent' }]}
+        style={[
+          styles.container,
+          { backgroundColor: colors.neutral.transparent },
+        ]}
         edges={['top']}>
         <View
           style={[
@@ -297,7 +300,7 @@ const HelpScreen: React.FC = () => {
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
-  scrollTransparent: { backgroundColor: 'transparent' },
+  scrollTransparent: { backgroundColor: colors.neutral.transparent },
   header: {
     padding: odeSpacing.md,
     borderBottomWidth: odeBorderWidth.hairline,
@@ -330,12 +333,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginRight: 12,
     overflow: 'hidden',
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   logo: {
     width: 40,
     height: 40,
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   content: {
     padding: odeSpacing.md,
diff --git a/formulus/src/screens/HomeScreen.tsx b/formulus/src/screens/HomeScreen.tsx
index 4e579aa0e..689e6a9b5 100644
--- a/formulus/src/screens/HomeScreen.tsx
+++ b/formulus/src/screens/HomeScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import {
   BackHandler,
   StyleSheet,
@@ -65,7 +65,7 @@ const HomeScreen = ({ navigation }: { navigation: any }) => {
     }, [showConfirm]),
   );
 
-  const checkAndSetAppUri = async () => {
+  const checkAndSetAppUri = useCallback(async () => {
     try {
       const filePath = `${RNFS.DocumentDirectoryPath}/app/index.html`;
       const fileExists = await RNFS.exists(filePath);
@@ -85,13 +85,13 @@ const HomeScreen = ({ navigation }: { navigation: any }) => {
     } catch (err) {
       console.warn('[HomeScreen] Failed to setup app URI:', err);
     }
-  };
+  }, [reloadTheme]);
 
   useEffect(() => {
     Promise.resolve().then(() => {
       checkAndSetAppUri();
     });
-  }, []);
+  }, [checkAndSetAppUri]);
 
   useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
@@ -100,7 +100,7 @@ const HomeScreen = ({ navigation }: { navigation: any }) => {
       });
     });
     return unsubscribe;
-  }, [navigation]);
+  }, [navigation, checkAndSetAppUri]);
 
   useEffect(() => {
     const onBundleUpdated: Listener = () => {
@@ -109,7 +109,7 @@ const HomeScreen = ({ navigation }: { navigation: any }) => {
     };
     appEvents.addListener('bundleUpdated', onBundleUpdated);
     return () => appEvents.removeListener('bundleUpdated', onBundleUpdated);
-  }, []);
+  }, [checkAndSetAppUri]);
 
   useEffect(() => {
     if (localUri) {
diff --git a/formulus/src/screens/MoreScreen.tsx b/formulus/src/screens/MoreScreen.tsx
index d69efaa42..9c527718d 100644
--- a/formulus/src/screens/MoreScreen.tsx
+++ b/formulus/src/screens/MoreScreen.tsx
@@ -12,6 +12,7 @@ import { useScreenShellStyle } from '../hooks/useScreenShellStyle';
 import MenuDrawer from '../components/MenuDrawer';
 import { logout } from '../api/synkronus/Auth';
 import { useConfirmModal } from '../contexts/ConfirmModalContext';
+import colors from '../theme/colors';
 
 type MoreScreenNavigationProp = BottomTabNavigationProp<
   MainTabParamList,
@@ -104,7 +105,7 @@ const MoreScreen: React.FC = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
 });
 
diff --git a/formulus/src/screens/ObservationDetailScreen.tsx b/formulus/src/screens/ObservationDetailScreen.tsx
index 60cf1ee37..d41e622c0 100644
--- a/formulus/src/screens/ObservationDetailScreen.tsx
+++ b/formulus/src/screens/ObservationDetailScreen.tsx
@@ -237,7 +237,10 @@ const ObservationDetailScreen: React.FC<ObservationDetailScreenProps> = ({
     return (
       <View style={shellStyle}>
         <SafeAreaView
-          style={[styles.container, { backgroundColor: 'transparent' }]}>
+          style={[
+            styles.container,
+            { backgroundColor: colors.neutral.transparent },
+          ]}>
           <View style={styles.loadingContainer}>
             <ActivityIndicator size="large" color={themeColors.primary} />
             <Text
@@ -254,7 +257,10 @@ const ObservationDetailScreen: React.FC<ObservationDetailScreenProps> = ({
     return (
       <View style={shellStyle}>
         <SafeAreaView
-          style={[styles.container, { backgroundColor: 'transparent' }]}>
+          style={[
+            styles.container,
+            { backgroundColor: colors.neutral.transparent },
+          ]}>
           <View style={styles.errorContainer}>
             <Text style={styles.errorText}>Observation not found</Text>
           </View>
@@ -282,7 +288,10 @@ const ObservationDetailScreen: React.FC<ObservationDetailScreenProps> = ({
   return (
     <View style={shellStyle}>
       <SafeAreaView
-        style={[styles.container, { backgroundColor: 'transparent' }]}>
+        style={[
+          styles.container,
+          { backgroundColor: colors.neutral.transparent },
+        ]}>
         <ScrollView
           style={styles.content}
           contentContainerStyle={[
diff --git a/formulus/src/screens/ObservationsScreen.tsx b/formulus/src/screens/ObservationsScreen.tsx
index ed4fa6b88..667aae9d2 100644
--- a/formulus/src/screens/ObservationsScreen.tsx
+++ b/formulus/src/screens/ObservationsScreen.tsx
@@ -212,7 +212,10 @@ const ObservationsScreen: React.FC = () => {
     return (
       <View style={shellStyle}>
         <SafeAreaView
-          style={[styles.container, { backgroundColor: 'transparent' }]}>
+          style={[
+            styles.container,
+            { backgroundColor: colors.neutral.transparent },
+          ]}>
           <View style={styles.loadingContainer}>
             <ActivityIndicator size="large" color={themeColors.primary} />
             <Text
@@ -229,7 +232,10 @@ const ObservationsScreen: React.FC = () => {
     return (
       <View style={shellStyle}>
         <SafeAreaView
-          style={[styles.container, { backgroundColor: 'transparent' }]}>
+          style={[
+            styles.container,
+            { backgroundColor: colors.neutral.transparent },
+          ]}>
           <EmptyState
             icon="alert-circle-outline"
             title="Error Loading Observations"
@@ -245,7 +251,10 @@ const ObservationsScreen: React.FC = () => {
   return (
     <View style={shellStyle}>
       <SafeAreaView
-        style={[styles.container, { backgroundColor: 'transparent' }]}
+        style={[
+          styles.container,
+          { backgroundColor: colors.neutral.transparent },
+        ]}
         edges={['top']}>
         <View
           style={[
@@ -376,7 +385,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   listTransparent: {
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   header: {
     flexDirection: 'row',
diff --git a/formulus/src/screens/SettingsScreen.tsx b/formulus/src/screens/SettingsScreen.tsx
index 53bfee8eb..e39e29398 100644
--- a/formulus/src/screens/SettingsScreen.tsx
+++ b/formulus/src/screens/SettingsScreen.tsx
@@ -282,7 +282,7 @@ const SettingsScreen = () => {
         return false;
       }
     },
-    [initialServerUrl],
+    [initialServerUrl, showConfirm],
   );
 
   const handleLogin = useCallback(async () => {
@@ -411,7 +411,10 @@ const SettingsScreen = () => {
   return (
     <View style={shellStyle}>
       <SafeAreaView
-        style={[styles.container, { backgroundColor: 'transparent' }]}
+        style={[
+          styles.container,
+          { backgroundColor: colors.neutral.transparent },
+        ]}
         edges={['top']}>
         <View
           style={[
@@ -436,7 +439,7 @@ const SettingsScreen = () => {
         </View>
 
         <ScrollView
-          style={[styles.card, { backgroundColor: 'transparent' }]}
+          style={[styles.card, { backgroundColor: colors.neutral.transparent }]}
           contentContainerStyle={styles.cardContent}
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="on-drag">
@@ -621,12 +624,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginRight: 12,
     overflow: 'hidden',
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   logo: {
     width: 40,
     height: 40,
-    backgroundColor: 'transparent',
+    backgroundColor: colors.neutral.transparent,
   },
   brandName: {
     fontSize: odeTypography.screenTitle,
diff --git a/formulus/src/services/GeolocationService.ts b/formulus/src/services/GeolocationService.ts
index 05408338c..2196e0114 100644
--- a/formulus/src/services/GeolocationService.ts
+++ b/formulus/src/services/GeolocationService.ts
@@ -9,6 +9,7 @@ import {
   hasLocationPermission,
 } from './LocationPermissions';
 import { RESULTS } from 'react-native-permissions';
+import { appEvents } from '../webview/FormulusMessageHandlers';
 
 /**
  * Geolocation for observations: one "session" per open form in FormplayerModal.
@@ -37,6 +38,10 @@ export class GeolocationService {
 
   private activeSessionCleanup: (() => void) | null = null;
 
+  /** Custom-app watch (map tab) — separate from formplayer observation session. */
+  private appWatchFieldId: string | null = null;
+  private appWatchCleanup: (() => void) | null = null;
+
   private constructor() {}
 
   public static getInstance(): GeolocationService {
@@ -139,6 +144,77 @@ export class GeolocationService {
     this.cachedAt = 0;
   }
 
+  private emitAppWatchUpdate(
+    fieldId: string,
+    location: ObservationGeolocation,
+  ): void {
+    appEvents.emit('locationWatchUpdate', {
+      fieldId,
+      location: {
+        type: 'location' as const,
+        latitude: location.latitude || 0,
+        longitude: location.longitude || 0,
+        accuracy: location.accuracy,
+        altitude: location.altitude,
+        altitudeAccuracy: location.altitude_accuracy,
+        timestamp: location.timestamp ?? new Date().toISOString(),
+      },
+    });
+  }
+
+  /** Start battery-conscious watch for custom apps; returns cleanup. */
+  public startAppLocationWatch(fieldId: string): () => void {
+    this.stopAppLocationWatch();
+    this.appWatchFieldId = fieldId;
+
+    let cancelled = false;
+    let watchId: number | null = null;
+
+    const push = (loc: ObservationGeolocation | null) => {
+      if (!loc || cancelled || this.appWatchFieldId !== fieldId) return;
+      this.mergeBestCandidate(loc);
+      this.emitAppWatchUpdate(fieldId, loc);
+    };
+
+    void this.getPositionOnce(this.freshConfig).then(push);
+
+    void (async () => {
+      const ok = await hasLocationPermission();
+      if (cancelled || !ok) return;
+      watchId = Geolocation.watchPosition(
+        position => push(this.convertToObservationGeolocation(position)),
+        error => console.warn('App location watch error:', error),
+        { enableHighAccuracy: true, distanceFilter: 20 },
+      );
+    })();
+
+    const cleanup = () => {
+      cancelled = true;
+      if (watchId != null) {
+        Geolocation.clearWatch(watchId);
+        watchId = null;
+      }
+      if (this.appWatchFieldId === fieldId) {
+        this.appWatchFieldId = null;
+      }
+      if (this.appWatchCleanup === cleanup) {
+        this.appWatchCleanup = null;
+      }
+    };
+
+    this.appWatchCleanup = cleanup;
+    return cleanup;
+  }
+
+  public stopAppLocationWatch(fieldId?: string): void {
+    if (!this.appWatchCleanup) return;
+    if (fieldId && this.appWatchFieldId !== fieldId) return;
+    const run = this.appWatchCleanup;
+    this.appWatchCleanup = null;
+    this.appWatchFieldId = null;
+    run();
+  }
+
   private async getPositionOnce(
     config: GeolocationConfig,
   ): Promise<ObservationGeolocation | null> {
diff --git a/formulus/src/services/QrcodeRequestCoordinator.ts b/formulus/src/services/QrcodeRequestCoordinator.ts
new file mode 100644
index 000000000..7f32d015b
--- /dev/null
+++ b/formulus/src/services/QrcodeRequestCoordinator.ts
@@ -0,0 +1,63 @@
+/**
+ * Ensures at most one in-flight `requestQrcode` bridge call; settles on cancel.
+ */
+
+export type QrcodeBridgeResult = {
+  fieldId?: string;
+  status: string;
+  message?: string;
+  data?: unknown;
+};
+
+type ActiveRequest = {
+  fieldId: string;
+  resolve: (result: unknown) => void;
+  settled: boolean;
+};
+
+export class QrcodeRequestCoordinator {
+  private active: ActiveRequest | null = null;
+
+  /** Start a QR request, or reject immediately if the scanner is already open. */
+  request(fieldId: string): Promise<unknown> {
+    if (this.active && !this.active.settled) {
+      return Promise.resolve({
+        fieldId,
+        status: 'error',
+        message: 'QR scanner is already open',
+      } satisfies QrcodeBridgeResult);
+    }
+
+    return new Promise(resolve => {
+      this.active = { fieldId, resolve, settled: false };
+    });
+  }
+
+  /** Resolve the active request (idempotent). */
+  settle(result: unknown): void {
+    if (!this.active || this.active.settled) return;
+    this.active.settled = true;
+    const { resolve } = this.active;
+    this.active = null;
+    resolve(result);
+  }
+
+  /** Cancel the active request if it matches `fieldId` (or any if omitted). */
+  cancel(fieldId?: string): void {
+    if (!this.active || this.active.settled) return;
+    if (fieldId && this.active.fieldId !== fieldId) return;
+
+    this.settle({
+      fieldId: this.active.fieldId,
+      status: 'cancelled',
+      message: 'QR scan cancelled',
+    } satisfies QrcodeBridgeResult);
+  }
+
+  getActiveFieldId(): string | null {
+    if (!this.active || this.active.settled) return null;
+    return this.active.fieldId;
+  }
+}
+
+export const qrcodeRequestCoordinator = new QrcodeRequestCoordinator();
diff --git a/formulus/src/services/__tests__/QrcodeRequestCoordinator.test.ts b/formulus/src/services/__tests__/QrcodeRequestCoordinator.test.ts
new file mode 100644
index 000000000..6a404ef7c
--- /dev/null
+++ b/formulus/src/services/__tests__/QrcodeRequestCoordinator.test.ts
@@ -0,0 +1,42 @@
+import { QrcodeRequestCoordinator } from '../QrcodeRequestCoordinator';
+
+describe('QrcodeRequestCoordinator', () => {
+  it('rejects a second request while the scanner is open', async () => {
+    const coordinator = new QrcodeRequestCoordinator();
+    void coordinator.request('field-a');
+
+    const second = await coordinator.request('field-b');
+    expect(second).toEqual({
+      fieldId: 'field-b',
+      status: 'error',
+      message: 'QR scanner is already open',
+    });
+  });
+
+  it('settles the active request once', async () => {
+    const coordinator = new QrcodeRequestCoordinator();
+    const promise = coordinator.request('field-a');
+
+    coordinator.settle({ fieldId: 'field-a', status: 'success', data: 'x' });
+    coordinator.settle({ fieldId: 'field-a', status: 'cancelled' });
+
+    await expect(promise).resolves.toEqual({
+      fieldId: 'field-a',
+      status: 'success',
+      data: 'x',
+    });
+  });
+
+  it('cancels with a cancelled status', async () => {
+    const coordinator = new QrcodeRequestCoordinator();
+    const promise = coordinator.request('field-a');
+
+    coordinator.cancel('field-a');
+
+    await expect(promise).resolves.toEqual({
+      fieldId: 'field-a',
+      status: 'cancelled',
+      message: 'QR scan cancelled',
+    });
+  });
+});
diff --git a/formulus/src/webview/FormulusInterfaceDefinition.ts b/formulus/src/webview/FormulusInterfaceDefinition.ts
index 7495db379..5dfa73e94 100644
--- a/formulus/src/webview/FormulusInterfaceDefinition.ts
+++ b/formulus/src/webview/FormulusInterfaceDefinition.ts
@@ -478,6 +478,23 @@ export interface FormulusInterface {
    */
   requestLocation(fieldId: string): Promise<LocationResult>;
 
+  /**
+   * Return the best cached device fix (if any) without forcing a new GPS read.
+   * @param fieldId Optional field id for parity with `requestLocation`
+   */
+  getCachedLocation(fieldId?: string): Promise<LocationResult | null>;
+
+  /**
+   * Subscribe to location updates while the custom app WebView is active.
+   * Updates arrive as `locationWatchUpdate` window messages.
+   */
+  watchLocation(
+    fieldId: string,
+  ): Promise<{ status: 'started' | 'error'; message?: string }>;
+
+  /** Stop a prior `watchLocation` subscription for `fieldId`. */
+  stopWatchLocation(fieldId: string): Promise<void>;
+
   /**
    * Request file selection for a field
    * @param {string} fieldId - The ID of the field
diff --git a/formulus/src/webview/FormulusMessageHandlers.ts b/formulus/src/webview/FormulusMessageHandlers.ts
index cffcc592d..d70eeaf00 100644
--- a/formulus/src/webview/FormulusMessageHandlers.ts
+++ b/formulus/src/webview/FormulusMessageHandlers.ts
@@ -3,6 +3,7 @@ This is where the actual implementation of the methods happens on the React Nati
 It handles the messages received from the WebView and executes the corresponding native functionality.
 */
 import { GeolocationService } from '../services/GeolocationService';
+import { qrcodeRequestCoordinator } from '../services/QrcodeRequestCoordinator';
 import { WebViewMessageEvent, WebView } from 'react-native-webview';
 import RNFS from 'react-native-fs';
 import * as Keychain from 'react-native-keychain';
@@ -529,27 +530,28 @@ export function createFormulusMessageHandlers(): FormulusMessageHandlers {
     onRequestQrcode: async (fieldId: string): Promise<unknown> => {
       console.log('Request QR code handler called', fieldId);
 
-      return new Promise(resolve => {
-        try {
-          // Emit event to open QR scanner modal
-          appEvents.emit('openQRScanner', {
-            fieldId,
-            onResult: (result: unknown) => {
-              console.log('QR scan result received:', result);
-              resolve(result);
-            },
-          });
-        } catch (error) {
-          console.error('Error in QR code handler:', error);
-          const errorMessage =
-            error instanceof Error ? error.message : 'Unknown error';
-          resolve({
-            fieldId,
-            status: 'error',
-            message: `QR code error: ${errorMessage}`,
-          });
-        }
-      });
+      const promise = qrcodeRequestCoordinator.request(fieldId);
+
+      try {
+        appEvents.emit('openQRScanner', {
+          fieldId,
+          onResult: (result: unknown) => {
+            console.log('QR scan result received:', result);
+            qrcodeRequestCoordinator.settle(result);
+          },
+        });
+      } catch (error) {
+        console.error('Error in QR code handler:', error);
+        const errorMessage =
+          error instanceof Error ? error.message : 'Unknown error';
+        qrcodeRequestCoordinator.settle({
+          fieldId,
+          status: 'error',
+          message: `QR code error: ${errorMessage}`,
+        });
+      }
+
+      return promise;
     },
     onRequestSignature: async (fieldId: string): Promise<unknown> => {
       console.log('Request signature handler called', fieldId);
@@ -686,6 +688,71 @@ export function createFormulusMessageHandlers(): FormulusMessageHandlers {
         }
       });
     },
+
+    onGetCachedLocation: async (
+      payload: string | { fieldId?: string },
+    ): Promise<unknown> => {
+      const fieldId =
+        typeof payload === 'string'
+          ? payload
+          : typeof payload?.fieldId === 'string'
+            ? payload.fieldId
+            : '';
+      const geolocationService = GeolocationService.getInstance();
+      const position = geolocationService.getCachedLocation();
+      if (!position) return null;
+      return {
+        fieldId,
+        status: 'success' as const,
+        data: {
+          type: 'location' as const,
+          latitude: position.latitude || 0,
+          longitude: position.longitude || 0,
+          accuracy: position.accuracy,
+          altitude: position.altitude,
+          altitudeAccuracy: position.altitude_accuracy,
+          timestamp: position.timestamp ?? new Date().toISOString(),
+        },
+      };
+    },
+
+    onWatchLocation: async (
+      payload: string | { fieldId?: string },
+    ): Promise<unknown> => {
+      const fieldId =
+        typeof payload === 'string'
+          ? payload
+          : typeof payload?.fieldId === 'string'
+            ? payload.fieldId
+            : '';
+      if (!fieldId) {
+        return { status: 'error', message: 'fieldId is required' };
+      }
+      try {
+        GeolocationService.getInstance().startAppLocationWatch(fieldId);
+        return { status: 'started' };
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : 'watchLocation failed';
+        return { status: 'error', message };
+      }
+    },
+
+    onStopWatchLocation: async (
+      payload: string | { fieldId?: string },
+    ): Promise<unknown> => {
+      const fieldId =
+        typeof payload === 'string'
+          ? payload
+          : typeof payload?.fieldId === 'string'
+            ? payload.fieldId
+            : '';
+      GeolocationService.getInstance().stopAppLocationWatch(
+        fieldId || undefined,
+      );
+      return { status: 'stopped' };
+    },
+
     onRequestVideo: async (fieldId: string): Promise<unknown> => {
       return new Promise((resolve, reject) => {
         try {
diff --git a/packages/tokens/dist/css/tokens.css b/packages/tokens/dist/css/tokens.css
index 0c64d16f0..3bc7eb40b 100644
--- a/packages/tokens/dist/css/tokens.css
+++ b/packages/tokens/dist/css/tokens.css
@@ -4,7 +4,7 @@
  * This file is auto-generated by Style Dictionary.
  * Do not edit directly. Edit source files in src/tokens/ instead.
  * 
- * Generated: 2026-05-18T02:14:18.499Z
+ * Generated: 2026-06-18T10:31:25.525Z
  */
 
 :root {
diff --git a/packages/tokens/dist/js/tokens.d.ts b/packages/tokens/dist/js/tokens.d.ts
index d618b9de4..0f4c29851 100644
--- a/packages/tokens/dist/js/tokens.d.ts
+++ b/packages/tokens/dist/js/tokens.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 18 May 2026 02:14:18 GMT
+ * Generated on Thu, 18 Jun 2026 10:31:25 GMT
  */
 
 export const ContrastAaLarge : string;
diff --git a/packages/tokens/dist/js/tokens.js b/packages/tokens/dist/js/tokens.js
index 1c564e62c..751cf3659 100644
--- a/packages/tokens/dist/js/tokens.js
+++ b/packages/tokens/dist/js/tokens.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 18 May 2026 02:14:18 GMT
+ * Generated on Thu, 18 Jun 2026 10:31:25 GMT
  */
 
 export const ContrastAaLarge = "3:1";
diff --git a/packages/tokens/dist/react-native/tokens.d.ts b/packages/tokens/dist/react-native/tokens.d.ts
index e9109fdbd..026c54ad6 100644
--- a/packages/tokens/dist/react-native/tokens.d.ts
+++ b/packages/tokens/dist/react-native/tokens.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 18 May 2026 02:14:18 GMT
+ * Generated on Thu, 18 Jun 2026 10:31:25 GMT
  */
 
 export const contrastAaLarge : string;
diff --git a/packages/tokens/dist/react-native/tokens.js b/packages/tokens/dist/react-native/tokens.js
index 932f2ff13..39fb0b14c 100644
--- a/packages/tokens/dist/react-native/tokens.js
+++ b/packages/tokens/dist/react-native/tokens.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 18 May 2026 02:14:18 GMT
+ * Generated on Thu, 18 Jun 2026 10:31:25 GMT
  */
 
 module.exports = {