Function MainToolbar

packages/editor-app/src/components/MainToolbar.tsx:63–289

({
    messageHub,
    commandManager,
    onSaveScene,
    onOpenScene,
    onUndo,
    onRedo,
    onPlay,
    onPause,
    onStop,
    onStep,
    onRunInBrowser,
    onRunOnDevice
}: MainToolbarProps)

}

export function MainToolbar({
    messageHub,
    commandManager,
    onSaveScene,
    onOpenScene,
    onUndo,
    onRedo,
    onPlay,
    onPause,
    onStop,
    onStep,
    onRunInBrowser,
    onRunOnDevice
}: MainToolbarProps) {
    const { t } = useLocale();
    const [playState, setPlayState] = useState<PlayState>('stopped');
    const [canUndo, setCanUndo] = useState(false);
    const [canRedo, setCanRedo] = useState(false);
    const [showRunMenu, setShowRunMenu] = useState(false);
    const runMenuRef = useRef<HTMLDivElement>(null);

    // Close run menu when clicking outside
    useEffect(() => {
        if (!showRunMenu) return;

        const handleClickOutside = (e: MouseEvent) => {
            if (runMenuRef.current && !runMenuRef.current.contains(e.target as Node)) {
                setShowRunMenu(false);
            }
        };

        const timer = setTimeout(() => {
            document.addEventListener('click', handleClickOutside);
        }, 10);

        return () => {
            clearTimeout(timer);
            document.removeEventListener('click', handleClickOutside);
        };
    }, [showRunMenu]);

    useEffect(() => {
        if (commandManager) {
            const updateUndoRedo = () => {
                setCanUndo(commandManager.canUndo());
                setCanRedo(commandManager.canRedo());
            };
            updateUndoRedo();

            if (messageHub) {
                const unsubscribe = messageHub.subscribe('command:executed', updateUndoRedo);
                return () => unsubscribe();
            }
        }
    }, [commandManager, messageHub]);

    useEffect(() => {
        if (messageHub) {