"use client"; import { motion, useReducedMotion } from "framer-motion"; import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; /** * The wizard's Back / Next bar. * * Portalled to on purpose: the page content animates its entrance with * a transform, and a transform on an ancestor turns it into the containing * block for `position: fixed` — the bar would briefly render inside the * content and then jump to the viewport bottom. Rendering it outside every * animated wrapper (and only fading it in, never transforming it) keeps it * pinned to the bottom edge from the first frame. * * Flat, full-width and above the safe area. The wizard pages hide the tab * bar, so this is the only bottom chrome while the flow is open. */ export function WizardActionBar({ children }: { children: React.ReactNode }) { const [mounted, setMounted] = useState(false); const reduceMotion = useReducedMotion(); useEffect(() => setMounted(true), []); if (!mounted) return null; return createPortal(

{children}

, document.body, ); }