Explain each layout

src/grid/GridLayout.tsx

@@ -36,6 +36,10 @@ interface GridCSSProperties extends CSSProperties {
   "--height": string;
 }
 
+/**
+ * An implementation of the "grid" layout, in which all participants are shown
+ * together in a scrolling grid.
+ */
 export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   minBounds,
   spotlightAlignment,

src/grid/OneOnOneLayout.tsx

@@ -24,6 +24,10 @@ import { useReactiveState } from "../useReactiveState";
 import styles from "./OneOnOneLayout.module.css";
 import { DragCallback } from "./Grid";
 
+/**
+ * An implementation of the "one-on-one" layout, in which the remote participant
+ * is shown at maximum size, overlaid by a small view of the local participant.
+ */
 export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
   minBounds,
   pipAlignment,

src/grid/SpotlightExpandedLayout.tsx

@@ -23,6 +23,10 @@ import { DragCallback } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 import { useReactiveState } from "../useReactiveState";
 
+/**
+ * An implementation of the "expanded spotlight" layout, in which the spotlight
+ * tile stretches edge-to-edge and is overlaid by a picture-in-picture tile.
+ */
 export const makeSpotlightExpandedLayout: CallLayout<
   SpotlightExpandedLayoutModel
 > = ({ minBounds, pipAlignment }) => ({

src/grid/SpotlightLandscapeLayout.tsx

@@ -23,6 +23,11 @@ import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../st
 import styles from "./SpotlightLandscapeLayout.module.css";
 import { useReactiveState } from "../useReactiveState";
 
+/**
+ * An implementation of the "spotlight landscape" layout, in which the spotlight
+ * tile takes up most of the space on the left, and the grid of participants is
+ * shown as a scrolling rail on the right.
+ */
 export const makeSpotlightLandscapeLayout: CallLayout<
   SpotlightLandscapeLayoutModel
 > = ({ minBounds }) => ({

src/grid/SpotlightPortraitLayout.tsx

@@ -34,6 +34,11 @@ interface GridCSSProperties extends CSSProperties {
   "--grid-tile-height": string;
 }
 
+/**
+ * An implementation of the "spotlight portrait" layout, in which the spotlight
+ * tile is shown across the top of the screen, and the grid of participants
+ * scrolls behind it.
+ */
 export const makeSpotlightPortraitLayout: CallLayout<
   SpotlightPortraitLayoutModel
 > = ({ minBounds }) => ({