// ios-frame.jsx — iOS device wrapper. Only renders the chrome on wider screens
// (prototype testing). On a real phone the app fills the viewport directly.
function useIsMobile() {
const [is, setIs] = React.useState(() =>
typeof window !== 'undefined' && window.matchMedia('(max-width: 480px)').matches
);
React.useEffect(() => {
const m = window.matchMedia('(max-width: 480px)');
const onChange = () => setIs(m.matches);
m.addEventListener?.('change', onChange);
return () => m.removeEventListener?.('change', onChange);
}, []);
return is;
}
function IOSStatusBar({ dark = false, time = '9:41' }) {
const c = dark ? '#fff' : '#000';
return (
);
}
function IOSDevice({ children, width = 390, height = 844, dark = false }) {
return (
);
}
// Top-level shell. On mobile: app fills the viewport directly. On desktop: wrap
// in iOS frame for prototype testing.
function AppShell({ theme, children }) {
const isMobile = useIsMobile();
// Faux status bar inside the app — needed on web (where we don't get a real one).
// We still render it on mobile so the design lines up.
const StatusBar = (
);
if (isMobile) {
return (
);
}
// Desktop: iOS frame on a stage, scaled to fit small viewports.
return (
);
}
Object.assign(window, { IOSDevice, IOSStatusBar, AppShell, useIsMobile });