Call lobby

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type ReactNode,} from 'react';import { DemoPointer, runDemo, type Demo } from './demo-pointer';import { CameraFeed, type LobbyFeed } from './camera-feed';import {  AddPersonIcon,  CameraIcon,  CameraOffIcon,  ChatIcon,  ChevronIcon,  CollapseIcon,  ExpandIcon,

/* Call lobby (call-lobby.tsx): a slate stage with the call's window in it. Header, camera   preview, control bar. Every state is drawn already; the component flips data attributes and   the rules below show one face or the other, with opacity, visibility and transforms.   Colours are the tokens below, light-dark(light, dark): the lobby takes the color-scheme it   inherits from the page (light unless the page says otherwise), or the one its colorScheme prop   sets (data-color-scheme). By day the window is white on a pale slate, at night dark on a deep   one. The camera pictures are content, the same on both, and so is what sits on them: the   full-screen button over your picture, and the frame round the host's.   Memory. A phone keeps the page's pixels in tiles the width of the screen, and a tile painted   again takes a second buffer. So every part that changes while the demo plays paints on a small   layer of its own (will-change): the status chip, the card, the pills of controls and their   menus, the host's picture, your picture (which moves as a whole when another camera is   picked), the line for screen readers. Nothing else is painted again. None of those layers sits   in a box that clips with rounded corners but your picture's own, and the stage is one layout   boundary, sized from its width, so nothing inside lays out the page. The spinners stop when the   lobby is off screen. */.root {  /* The stage, the window, its edge and its shadow. */  --slate: #dfe1e6;  --night: #fff;  --edge: rgb(0 0 0 / 0.08);

'use client';import { useEffect, useRef } from 'react';import styles from './call-lobby.module.css';export type LobbyFeed = { src: string; poster: string; captions?: string };/** The local clips stand in for camera streams; playback follows the lobby's visibility. */export function CameraFeed({  feed,  active,  audible,}: {  feed: LobbyFeed;  active: boolean;  audible: boolean;}) {  const video = useRef<HTMLVideoElement>(null);  const wasAudible = useRef(false);  useEffect(() => {    const element = video.current;    if (!element) return;    let cancelled = false;

'use client';import { useEffect, useRef, type KeyboardEvent, type ReactNode } from 'react';import { CheckIcon } from './icons';import styles from './call-lobby.module.css';/* * A menu of choices that opens above its button: the microphone, the speaker, the camera, the * chat. It is always in the page, hidden until open, so that opening it adds nothing to the page * and lays out nothing new. It follows the menu pattern: arrow keys, Home and End move between the * choices, Enter or Space picks one, Escape closes and hands focus back to its button. */export type Choice = { id: string; label: string; icon?: ReactNode };export type Section = {  /** The heading of a group of choices. */  label: string;  choices: Choice[];  value: string;  onPick: (id: string) => void;};export function Menu({

/* * The lobby's icons: outlines on a 24-unit grid, drawn in the current colour. Each one is a still * drawing; a control that changes state shows another icon beside it rather than restyling one. */import type { ReactNode, SVGProps } from 'react';type IconProps = SVGProps<SVGSVGElement>;function Icon({ children, ...props }: IconProps & { children: ReactNode }) {  return (    <svg      viewBox="0 0 24 24"      fill="none"      stroke="currentColor"      strokeWidth="1.7"      strokeLinecap="round"      strokeLinejoin="round"      aria-hidden="true"      focusable="false"      {...props}    >      {children}    </svg>

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, glide * the pointer onto a control, press it and call the component's own handler, as a click would. * Stopping the demo (the reader takes over, or it scrolls away) ends the step in progress at once: * its promise rejects, which ends the script right there, and the pointer fades out. * * The pointer is an HTML box around a still drawing: it glides by an animation the compositor * plays, and the press scales a box that keeps a transform at rest, so nothing it does needs a * layout. */export type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer onto `target`: its middle, or a point given as shares of its size. */  moveTo: (target: Element | null | undefined, at?: Point) => Promise<void>;  /** Glides the pointer to a point of the stage, as shares of its size. */  moveToStage: (at: Point) => Promise<void>;

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;