<Fullscreen />

<Fullscreen /> adds a button to the top right of the visualizer that expands it to cover the browser viewport, above the host page’s own content. Clicking the button again returns the visualizer to its normal layout. While fullscreen, the host page’s scroll is locked so only the visualizer receives it.

This is intended for embedded hosts where the visualizer shares the page with other UI. Standalone deployments that already fill the window don’t need it.

Usage

Mount <Fullscreen /> anywhere inside <Visualizer />:

<script lang="ts">
	import { Visualizer } from '@viamrobotics/motion-tools'
	import { Fullscreen } from '@viamrobotics/motion-tools/plugins'
</script>

<div class="h-96 w-full">
	<Visualizer>
		<Fullscreen />
	</Visualizer>
</div>

While the plugin is mounted, selected-entity details cards open slightly lower so they don’t cover the button.