helix-engage/src/components/setup/wizard-layout-context.tsx

import { createContext } from 'react';

// Context that lets each WizardStep render content into the wizard
// shell's right pane via a portal — without lifting per-step data
// fetching up to the page. The shell sets `rightPaneEl` to the
// `<aside>` DOM node once it mounts; child WizardStep components read
// it and createPortal their `rightPane` prop into it.
//
// Why a portal and not a state-lifted prop on WizardShell:
//   - The right pane is tightly coupled to the active step's data
//     (e.g. "list of clinics created so far") which lives in the step
//     component's state. Lifting that state to the page would mean
//     duplicating the data-fetching layer, OR re-querying everything
//     from the page.
//   - Trying to pass `rightPane: ReactNode` upward via callbacks
//     either causes a one-frame flash (useEffect) or violates the
//     "no setState during render" rule.
//   - Portals are React-native, no extra render cycles, and the
//     DOM target is already part of the layout.

export type WizardLayoutContextValue = {
    rightPaneEl: HTMLElement | null;
};

export const WizardLayoutContext = createContext<WizardLayoutContextValue>({
    rightPaneEl: null,
});