evyos management

A cross-iframe selection pattern: the parent page opens a full-screen modal containing an iframe route. The user picks items, and the result is returned to the parent via window.postMessage. All payloads are validated with Zod and scoped by a per-session UUID.

Try Single Select Try Multi Select

Child pages are opened inside iframes — they receive sessionId via URL search params and must include it in every postMessage payload so the parent's session guard passes them through. Origin checks are driven by src/config/origin.ts.

Single Select

NonFieldSingleIFrameInput

Pick exactly one entity from an iframe list. The iframe closes automatically after selection.

Hook: useSingleSelectIFrameOpen Demo

Multi Select

NonFieldMultiIFrameInput

Pick many entities with checkboxes. The iframe stays open until the user confirms, then sends the full selection back.

Hook: useMultiSelectIFrameOpen Demo

Message Protocol

Parent opens iframe with `?sessionId=<uuid>` appended to the URL.

Child attaches its `message` listener, then `useFrameChild` sends `{ kind: "I_AM_READY", sessionId }` to parent.

Parent optionally sends pre-selection payloads and always finishes hydration with `{ kind: "PARENT_SYNC_COMPLETE", sessionId, hasInitialData }`.

Child keeps a centered loading overlay on top of the iframe until parent sync is complete, even when the selection is empty.

User picks → child calls `sendBack({ uuid, data })` → parent receives validated payloads, then `CLOSE_MODAL`.

Origins are validated against VITE_ALLOWED_IFRAME_ORIGINS on every incoming message. Messages from unknown origins are silently discarded.