feat: screenshare fullscreen button + pip spotlight, fix screenshare view

- Remove revert-to-grid logic that was overriding EC's natural screenshare
  spotlight, causing fullscreen to show user avatars instead of the screen
- Add fullscreen button to call controls (visible when screensharing) that
  requests fullscreen on the call embed container
- Add FullscreenButton component with enter/exit SVG icons to Controls.tsx
- PIP mode: sync setPipMode to CallControl; auto-enable spotlight when
  screenshare is active in pip so the screenshare fills the window
- Make useCallControlState accept undefined control for safe use in
  CallEmbedProvider
- Add package-lock.json to .gitignore (generated by local npm install)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/call/CallControls.tsx

@@ -21,6 +21,7 @@ import * as css from './styles.css';
 import {
   ChatButton,
   ControlDivider,
+  FullscreenButton,
   MicrophoneButton,
   ScreenShareButton,
   SoundButton,
@@ -32,13 +33,16 @@ import { settingsAtom } from '../../state/settings';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { stopPropagation } from '../../utils/keyboard';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { useCallEmbedRef } from '../../hooks/useCallEmbed';
 
 type CallControlsProps = {
   callEmbed: CallEmbed;
 };
 export function CallControls({ callEmbed }: CallControlsProps) {
   const controlRef = useRef<HTMLDivElement>(null);
+  const callEmbedRef = useCallEmbedRef();
   const [compact, setCompact] = useState(document.body.clientWidth < 500);
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
   useResizeObserver(
     useCallback(() => {
@@ -49,6 +53,20 @@ export function CallControls({ callEmbed }: CallControlsProps) {
     useCallback(() => controlRef.current, []),
   );
 
+  useEffect(() => {
+    const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+    return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
+  }, []);
+
+  const handleFullscreen = useCallback(() => {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      callEmbedRef.current?.requestFullscreen();
+    }
+  }, [callEmbedRef]);
+
   const { microphone, video, sound, screenshare, spotlight } = useCallControlState(
     callEmbed.control,
   );
@@ -338,6 +356,9 @@ export function CallControls({ callEmbed }: CallControlsProps) {
                 screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
               }
             />
+            {screenshare && (
+              <FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />
+            )}
           </Box>
         </Box>
         {!compact && <ControlDivider />}

src/app/features/call/Controls.tsx

@@ -158,6 +158,56 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
   );
 }
 
+const FullscreenIcon = () => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 4h-4v2h6v-6h-2v4z" />
+  </svg>
+);
+
+const ExitFullscreenIcon = () => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M9 3H7v4H3v2h6V3zm6 0v6h6V7h-4V3h-2zM3 13v2h4v4h2v-6H3zm14 4v-4h2v6h-6v-2h4z" />
+  </svg>
+);
+
+type FullscreenButtonProps = {
+  isFullscreen: boolean;
+  onToggle: () => void;
+};
+export function FullscreenButton({ isFullscreen, onToggle }: FullscreenButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant="Surface"
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={onToggle}
+          aria-label={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+          aria-pressed={isFullscreen}
+          outlined
+        >
+          {isFullscreen ? (
+            <ExitFullscreenIcon />
+          ) : (
+            <FullscreenIcon />
+          )}
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
 export function ChatButton() {
   const [chat, setChat] = useAtom(callChatAtom);