@weft-js/warp 0.0.0-stage → 0.1.0

package/src/live/Inbox.tsx

@@ -0,0 +1,220 @@
+import { announce, arrivals, feed, filterNotes, groupByDay, indicator, nextIndex, readOnView, uid, unreadCount, type InboxTab } from '@weft-js/warp-core'
+import { derived, state, untrack } from '@weft-js/core'
+import { Avatar, type LiveState } from '../parts'
+import { Badge } from '../Badge'
+import { Button } from '../Button'
+import { Skeleton } from '../Skeleton'
+import { toast } from '../Toast'
+import { use } from '@weft-js/warp-core/weft'
+import { avatarTint, G, val, type GlyphName } from './shared'
+import '../styles'
+import '@weft-js/warp-core/styles/components/tabs.css'
+import '@weft-js/warp-core/styles/components/link.css'
+import '@weft-js/warp-core/styles/app/inbox.css'
+import '@weft-js/warp-core/styles/app/notification.css'
+
+/** What a notification is about, which picks its glyph. */
+export type NoteKind = 'mention' | 'comment' | 'assign' | 'approve' | 'system' | 'invite'
+/** A button on a notification. */
+export interface NoteAction { id: string; label: string; emphasis?: 'solid' | 'outline' }
+/** One notification. */
+export interface Note {
+  id: string
+  actor: string
+  kind: NoteKind
+  verb: string
+  object?: string | undefined
+  detail?: string | undefined
+  /** Already formatted: the caller owns the clock. */
+  time: string
+  /** "Today", "Yesterday": see `dayLabel`. */
+  day?: string | undefined
+  source?: string | undefined
+  quote?: string | undefined
+  read?: boolean | undefined
+  actions?: NoteAction[] | undefined
+}
+
+const KIND: Record<NoteKind, [GlyphName, string]> = { mention: ['at', 'accent'], comment: ['comment', 'info'], assign: ['flag', 'caution'], approve: ['check', 'positive'], system: ['alert', 'critical'], invite: ['cal', 'accent'] }
+const TABS: Record<InboxTab, string> = { all: 'All', unread: 'Unread', mentions: 'Mentions' }
+const sentence = (n: Note) => [n.actor, n.verb, n.object, n.detail].filter(Boolean).join(' ')
+const label = (n: Note) => `${sentence(n)}${n.read ? '' : ', unread'}, ${n.time}`
+
+/** Props for Inbox. */
+export interface InboxProps {
+  /** Newest first. Undefined while the first load runs: skeletons, once. */
+  items: Note[] | undefined | { value: Note[] | undefined } | (() => Note[] | undefined)
+  /** The connection's state, shown in the foot as "Up to date" or "Connecting…". */
+  live?: (LiveState | (() => LiveState)) | undefined
+  /** The filter tabs, in order. Default all, unread and mentions. */
+  tabs?: InboxTab[] | undefined
+  title?: string | undefined
+  variant?: 'popover' | undefined
+  /** Is the inbox on screen? Rows are read after 2 s visible only while it is. */
+  open?: boolean | undefined
+  /** Updates waiting to sync (offline, reconnecting). */
+  queued?: number | undefined
+  viewAll?: string | undefined
+  /** Adds a settings button to the header, and is called when it is pressed. */
+  settings?: (() => void) | undefined
+  /** Called with a row's id once it has been seen or opened. */
+  onRead?: ((id: string) => void) | undefined
+  /** Called when Mark all as read is pressed. */
+  onReadAll?: (() => void) | undefined
+  /** Called with a row's id when it is dismissed. */
+  onDismiss?: ((id: string) => void) | undefined
+  /** Undo a dismiss: put the row back. */
+  onRestore?: ((note: Note) => void) | undefined
+  onAction?: ((note: Note, action: string) => void) | undefined
+  /** The row is a link to its object. */
+  onOpen?: ((note: Note) => void) | undefined
+}
+
+/**
+ * Inbox (07 §4.1, §4.2, §4.5): tabs filter one panel; a role=feed list grouped by day, rendered by key, so a read or an
+ * approval patches the row in place. New rows arrive; with the list scrolled, an "n new" pill shows instead of moving
+ * it. A dismissed row slides out and Undo is in the toast. Needs a mounted Toaster for Undo and announcements.
+ */
+export function Inbox({ items, live, tabs = ['all', 'unread', 'mentions'], title = 'Notifications', variant, open = true, queued = 0, viewAll, settings, onRead, onReadAll, onDismiss, onRestore, onAction, onOpen }: InboxProps) {
+  const id = uid('inbox')
+  const tab = state<InboxTab>(untrack(() => tabs)[0]!)
+  const data = derived(() => val<Note[] | undefined>(items))
+  const all = derived(() => data.value ?? [])
+  const leaving = state<string[]>([])
+  const fresh = state(0)
+  const focused = state<string | undefined>(undefined)
+  const shown = derived(() => filterNotes(all.value, tab.value))
+  const unread = derived(() => unreadCount(all.value))
+  const days = derived(() => groupByDay(shown.value))
+  const stop = derived(() => (shown.value.some(n => n.id === focused.value) ? focused.value : shown.value[0]?.id))
+  const tabId = (t: InboxTab) => `${id}-tab-${t}`
+  let list: HTMLDivElement | undefined
+  let tablist: HTMLDivElement | undefined
+  let root: HTMLElement | undefined
+  const doc = () => root!.ownerDocument
+
+  use(indicator, () => tablist, () => ({ selected: '[aria-selected="true"]', x: '--_ix', w: '--_iw', at: tab.value }))
+  use(feed, () => list, () => ({ items: '[data-scope="notification"]' }))
+  use(readOnView, () => list, () => ({ items: '[data-scope="notification"]', active: !!(open as unknown), onRead: (rid: string) => onRead?.(rid) }))
+  use(arrivals, () => list, () => ({
+    items: '[data-scope="notification"]',
+    ids: all.value.map(n => n.id),
+    onArrive: (ids: string[]) => { if (list && list.scrollTop > 0) fresh.value += ids.length },
+  }))
+
+  const pick = (t: InboxTab) => { tab.value = t; fresh.value = 0 }
+  const onTabKey = (e: KeyboardEvent) => {
+    const at = tabs.indexOf(tab.value)
+    const rtl = getComputedStyle(e.currentTarget as Element).direction === 'rtl'
+    const to = nextIndex(e.key, at, tabs.length, { rtl })
+    if (to < 0) return
+    e.preventDefault()
+    pick(tabs[to]!)
+    tablist!.querySelectorAll<HTMLElement>('[role="tab"]')[to]?.focus()
+  }
+  const dismiss = (n: Note, row: HTMLElement) => {
+    const rest = [...list!.querySelectorAll<HTMLElement>('[data-scope="notification"]')].filter(r => r !== row && r.dataset.state !== 'dismissed')
+    const at = [...list!.querySelectorAll('[data-scope="notification"]')].indexOf(row)
+    leaving.value = [...leaving.value, n.id]
+    ;(rest[at] ?? rest[at - 1])?.focus()
+    setTimeout(() => {
+      onDismiss?.(n.id)
+      leaving.value = leaving.value.filter(x => x !== n.id)
+    }, 240)
+    toast.show({ title: 'Notification dismissed', description: sentence(n), action: { label: 'Undo', onClick: () => onRestore?.(n) } })
+  }
+  const readAll = () => { onReadAll?.(); announce(doc(), 'All notifications marked as read') }
+  const open1 = (n: Note) => { if (!n.read) onRead?.(n.id); onOpen?.(n) }
+  const onRowKey = (e: KeyboardEvent, n: Note) => {
+    if (e.target !== e.currentTarget) return
+    if (e.key === 'Enter') { e.preventDefault(); open1(n) }
+    if (e.key === 'Delete') { e.preventDefault(); dismiss(n, e.currentTarget as HTMLElement) }
+  }
+  const pressRow = (e: MouseEvent, n: Note) => { if (!(e.target as Element).closest?.('button, a')) open1(n) }
+  const toTop = () => { list?.scrollTo?.({ top: 0 }); if (list) list.scrollTop = 0; fresh.value = 0 }
+  const onScroll = () => { if (list!.scrollTop <= 0) fresh.value = 0 }
+  const sync = derived(() => {
+    const q = val<number>(queued)
+    if (q) return `${q} update${q > 1 ? 's' : ''} waiting to sync`
+    return (val<LiveState | undefined>(live) ?? 'live') === 'connecting' ? 'Connecting…' : 'Up to date'
+  })
+  const page = derived(() => viewAll)
+
+  return (
+    <section ref={n => (root = n)} data-scope="inbox" data-part="root" data-variant={variant} aria-labelledby={`${id}-t`}>
+      <div data-part="header">
+        <h3 id={`${id}-t`}>{title}</h3>
+        <Button emphasis="ghost" tone="neutral" size="sm" onClick={readAll}>Mark all as read</Button>
+        {settings && <Button emphasis="ghost" tone="neutral" size="sm" data-icon-only="" aria-label="Notification settings" onClick={settings}><G name="more" /></Button>}
+      </div>
+      <div data-scope="tabs" data-part="root">
+        <div ref={n => (tablist = n)} data-part="list" role="tablist" aria-label="Filter" onKeyDown={onTabKey}>
+          {tabs.map(t => (
+            <button key={t} data-part="trigger" role="tab" type="button" id={tabId(t)} aria-controls={`${id}-panel`} aria-selected={t === tab.value ? 'true' : 'false'} tabindex={t === tab.value ? undefined : '-1'} onClick={() => pick(t)}>
+              {TABS[t]}
+              {t === 'unread' && <> <Badge count>{unread.value}</Badge></>}
+            </button>
+          ))}
+          <span data-part="indicator" aria-hidden="true" data-instant=""></span>
+        </div>
+      </div>
+      {fresh.value > 0 && <Button size="sm" data-part="new-pill" onClick={toTop}>{fresh.value} new</Button>}
+      <div role="tabpanel" id={`${id}-panel`} aria-labelledby={tabId(tab.value)} data-part="panel">
+        <div ref={n => (list = n)} data-part="list" role="feed" aria-label={title} aria-busy={data.value === undefined ? 'true' : 'false'} tabindex={shown.value.length ? undefined : '0'} onScroll={onScroll}>
+          {data.value === undefined && <div data-part="group" aria-hidden="true"><Skeleton lines={3} /></div>}
+          {days.value.map(g => (
+            <div key={g.day} role="none">
+              <div data-part="group" aria-hidden="true">{g.day}</div>
+              {g.rows.map(n => <Row key={n.id} n={n} at={shown.value.indexOf(n) + 1} size={shown.value.length} leaving={leaving.value.includes(n.id)} stop={stop.value === n.id} onKey={onRowKey} onPress={pressRow} onFocus={() => (focused.value = n.id)} onDismiss={dismiss} onAction={(x: Note, a: string) => onAction?.(x, a)} />)}
+            </div>
+          ))}
+        </div>
+        {data.value !== undefined && shown.value.length === 0 && <div data-scope="empty-state"><p data-part="title">You're all caught up</p><p data-part="description">New mentions, invites and approvals show up here.</p></div>}
+      </div>
+      <div data-part="footer">
+        <span>{sync.value}</span>
+        {page.value && <a href={page.value} data-scope="link">View all</a>}
+      </div>
+    </section>
+  )
+}
+
+function Row({ n, at, size, leaving, stop, onKey, onPress, onFocus, onDismiss, onAction }: { n: Note; at: number; size: number; leaving: boolean; stop: boolean; onKey: (e: KeyboardEvent, n: Note) => void; onPress: (e: MouseEvent, n: Note) => void; onFocus: () => void; onDismiss: (n: Note, row: HTMLElement) => void; onAction: (n: Note, id: string) => void }) {
+  const icon = derived(() => KIND[n.kind] ?? KIND.system)
+  const name = derived(() => label(n))
+  const glyph = derived(() => icon.value[0])
+  return (
+    <article
+      data-scope="notification"
+      data-sweep=""
+     
+      data-id={n.id}
+      data-read={n.read ? '' : undefined}
+      data-state={leaving ? 'dismissed' : undefined}
+      tabindex={stop ? '0' : '-1'}
+      data-initial={stop ? '' : undefined}
+      aria-label={name.value}
+      aria-posinset={at}
+      aria-setsize={size}
+      onKeyDown={(e: KeyboardEvent) => onKey(e, n)}
+      onClick={(e: MouseEvent) => onPress(e, n)}
+      onFocusIn={onFocus}
+    >
+      <span data-part="sweep-base" aria-hidden="true"></span><span data-part="sweep" aria-hidden="true"></span>
+      <span data-part="icon">
+        <Avatar name={n.actor} style={avatarTint(n.actor)} />
+        <span data-part="kind" data-tone={icon.value[1]}><G name={glyph.value} /></span>
+      </span>
+      <p data-part="text"><b>{n.actor}</b> {n.verb}{n.object ? ' ' : ''}{n.object && <b>{n.object}</b>}{n.detail ? ` ${n.detail}` : ''}</p>
+      <span data-part="unread" aria-hidden="true"></span>
+      {n.quote && <div data-part="quote">{n.quote}</div>}
+      <span data-part="meta">{n.time}{n.source ? ` · ${n.source}` : ''}</span>
+      <Button emphasis="ghost" tone="neutral" size="sm" data-icon-only="" data-part="dismiss" aria-label={`Dismiss: ${n.actor} ${n.verb}`} tabindex="-1" onClick={(e: MouseEvent) => { e.stopPropagation(); onDismiss(n, (e.currentTarget as HTMLElement).closest('article')!) }}><G name="x" /></Button>
+      {n.actions?.length ? (
+        <div data-part="actions">
+          {n.actions.map((a: NoteAction) => <Button key={a.id} size="sm" emphasis={a.emphasis ?? 'solid'} tone={a.emphasis === 'outline' ? 'neutral' : undefined} onClick={() => onAction(n, a.id)}>{a.label}</Button>)}
+        </div>
+      ) : null}
+    </article>
+  )
+}

package/src/live/MeetingRoom.tsx

@@ -0,0 +1,298 @@
+import { ChatIcon, HandIcon, ScreenIcon, SmileIcon, UsersIcon } from '@weft-js/warp-icons'
+import { announce, floatReaction, galleryCols, hueOf, newHands, pauseOffscreen, pip, speakerFollow, speakingOut, tileLabel, toolbar, type LiveState, type ParticipantLike, type PipCorner } from '@weft-js/warp-core'
+import { derived, onCleanup, onMount, state, untrack, watch, type State } from '@weft-js/core'
+import { Avatar, LiveStatus } from '../parts'
+import { Button } from '../Button'
+import { Segmented } from '../Choice'
+import { use } from '@weft-js/warp-core/weft'
+import { avatarTint, G, held, val, type GlyphName } from './shared'
+import '../styles'
+import '@weft-js/warp-core/styles/app/base.css'
+import '@weft-js/warp-core/styles/app/room.css'
+import '@weft-js/warp-core/styles/app/tile.css'
+import '@weft-js/warp-core/styles/app/pip.css'
+import '@weft-js/warp-core/styles/app/call-controls.css'
+
+/** How the room arranges its tiles. */
+export type MeetingLayout = 'gallery' | 'speaker' | 'presentation' | 'board'
+/** Someone in the room. */
+export interface Participant extends ParticipantLike { isCamOn?: boolean }
+type Video = (p: Participant) => unknown
+
+const LAYOUTS: [MeetingLayout, string, GlyphName][] = [['gallery', 'Gallery', 'grid'], ['speaker', 'Speaker', 'speaker'], ['presentation', 'Presentation', 'present'], ['board', 'Board', 'board']]
+
+/** Built once a mount: an option's label is a node, and a read of the prop would otherwise make it again. */
+function LayoutPicker(props: { value: MeetingLayout; onChange: (l: MeetingLayout) => void }) {
+  const options = LAYOUTS.map(l => ({ value: l[0], label: <><G name={l[2]} />{l[1]}</> }))
+  return <Segmented label="Layout" size="sm" options={options} {...props} />
+}
+
+/**
+ * A tile (07 §3.1): video slot or avatar, name chip with level bars, flags with words in the name. The speaking ring is
+ * the sweep: `data-speaking`, then `data-speaking-out` until it has left. The bars read `--level`: set it on the tile
+ * (`[data-pid]`) at whatever rate the audio arrives; nothing re-renders.
+ */
+export function Tile({ p, self, video, role = 'group' }: { p: Participant; self?: boolean; video?: Video | undefined; role?: string }) {
+  let el: HTMLDivElement | undefined
+  use(speakingOut, () => el, () => !!p.isSpeaking)
+  const label = derived(() => tileLabel(self ? { ...p, name: `${p.name}, you` } : p))
+  const slot = untrack(() => video)
+  const camera = derived(() => !!slot && p.isCamOn !== false)
+  return (
+    <div
+      ref={n => (el = n)}
+      data-scope="tile"
+      role={role}
+      tabindex="-1"
+      aria-label={label.value}
+      data-pid={p.id}
+      data-speaking={p.isSpeaking ? '' : undefined}
+      data-hand={p.handRaised ? '' : undefined}
+      data-network={p.network === 'poor' ? 'poor' : undefined}
+      data-cam={p.isCamOn === false ? 'off' : undefined}
+      style={`--_hue:var(--warp-color-data-${hueOf(p.id)})`}
+    >
+      {camera.value ? <div data-part="video">{slot!(p)}</div> : <Avatar name={p.name} size="xl" style={avatarTint(p.id)} />}
+      <span data-part="flags">
+        {p.handRaised && <span data-part="flag" data-kind="hand" role="img" aria-label="Hand raised"><G name="hand" /></span>}
+        {p.network === 'poor' && <span data-part="flag" data-tone="caution" role="img" aria-label="Poor connection"><G name="signal" /></span>}
+        {p.isMuted && <span data-part="flag" data-tone="critical" role="img" aria-label="Muted"><G name="micoff" /></span>}
+      </span>
+      <span data-part="name">
+        {!p.isMuted && <span data-part="level"><i></i><i></i><i></i></span>}
+        {self ? 'You' : p.name}
+        {p.role ? <small> · {p.role}</small> : null}
+      </span>
+    </div>
+  )
+}
+
+/** Props for ControlBar. */
+export interface ControlBarProps {
+  mic: boolean
+  camera: boolean
+  sharing?: boolean | undefined
+  hand?: boolean | undefined
+  side?: 'people' | 'chat' | null | undefined
+  /** Icons only, no Chat or People (they go in More), and Leave icon-only (07 §3.3). */
+  compact?: boolean | undefined
+  onToggle: (control: 'mic' | 'camera' | 'share' | 'hand' | 'react' | 'chat' | 'people' | 'more') => void
+  onLeave?: (() => void) | undefined
+  /** Stands in for the control's name while a control has an open menu of its own. */
+  more?: string | undefined
+}
+
+// the visible label is inside the name (WCAG 2.5.3), and the name stays when the label hides
+function Control({ c, name, icon, pressed, device, label, first, onToggle }: { c: Parameters<ControlBarProps['onToggle']>[0]; name: string; icon: Parameters<typeof G>[0]['name']; pressed?: boolean | undefined; device?: boolean; label: string; first?: boolean; onToggle: ControlBarProps['onToggle'] }) {
+  return (
+    <button type="button" data-part="control" data-kind={device ? 'device' : undefined} aria-pressed={pressed ? 'true' : 'false'} aria-label={name} tabindex={first ? '0' : '-1'} onClick={() => onToggle(c)}>
+      <G name={icon} /><span data-part="label">{label}</span>
+    </button>
+  )
+}
+
+/** ControlBar (07 §3.2, §3.4): an APG toolbar. One tab stop, arrows between controls, Tab leaves; Leave is the only solid. */
+export function ControlBar({ mic, camera, sharing, hand, side, compact, onToggle, onLeave, more = 'More options' }: ControlBarProps) {
+  let bar: HTMLDivElement | undefined
+  use(toolbar, () => bar, () => ({ items: '[data-part="control"], [data-part="leave"]' }))
+  return (
+    <div ref={n => (bar = n)} data-scope="call-controls" role="toolbar" aria-label="Meeting controls">
+      <div data-part="group">
+        <Control onToggle={onToggle} c="mic" name={mic ? 'Microphone, mute' : 'Microphone, unmute'} icon={mic ? 'mic' : 'micoff'} pressed={mic} device label={mic ? 'Mute' : 'Unmute'} first />
+        <Control onToggle={onToggle} c="camera" name={camera ? 'Camera, stop video' : 'Camera, start video'} icon={camera ? 'cam' : 'camoff'} pressed={camera} device label={camera ? 'Stop video' : 'Start video'} />
+      </div>
+      <div data-part="group">
+        <Control onToggle={onToggle} c="share" name="Share screen" icon={ScreenIcon} pressed={sharing} label="Share" />
+        <Control onToggle={onToggle} c="hand" name={hand ? 'Lower hand' : 'Raise hand'} icon={HandIcon} pressed={hand} label={hand ? 'Lower hand' : 'Raise hand'} />
+        <Control onToggle={onToggle} c="react" name="React" icon={SmileIcon} label="React" />
+        {!compact && <Control onToggle={onToggle} c="chat" name="Chat" icon={ChatIcon} pressed={side === 'chat'} label="Chat" />}
+        {!compact && <Control onToggle={onToggle} c="people" name="People" icon={UsersIcon} pressed={side === 'people'} label="People" />}
+        <button type="button" data-part="control" aria-label={more} tabindex="-1" onClick={() => onToggle('more')}><G name="more" /></button>
+      </div>
+      <Button tone="critical" data-part="leave" aria-label="Leave meeting" data-icon-only={compact ? '' : undefined} tabindex="-1" onClick={() => onLeave?.()}><G name="leave" />{compact ? null : 'Leave'}</Button>
+    </div>
+  )
+}
+
+/** Props for MeetingRoom. */
+export interface MeetingRoomProps {
+  title: string
+  participants: Participant[] | { value: Participant[] } | (() => Participant[])
+  self: Participant
+  layout?: State<MeetingLayout> | MeetingLayout | undefined
+  /** Called with the layout picked in the switcher. */
+  onLayoutChange?: ((l: MeetingLayout) => void) | undefined
+  /** Elapsed time, already formatted (the caller owns the clock). */
+  timer?: unknown
+  /** Shows a Rec badge in the header. */
+  recording?: boolean | undefined
+  /** The room's connection: `room.status`, mapped. */
+  live?: string | (() => string) | undefined
+  /** Phone: speaker layout, no switcher, icon-only Leave. Unset: decided by the room's own width after mount. */
+  compact?: boolean | undefined
+  /** Dark island by default (07 §7). */
+  theme?: 'dark' | 'light' | undefined
+  /** Media is the caller's: warp never touches getUserMedia. Return the <video> for a participant. */
+  video?: Video | undefined
+  /** The shared screen, for presentation layout. */
+  share?: (() => unknown) | undefined
+  presenter?: string | undefined
+  /** What is being shared, in the presentation header. Default "Shared screen". */
+  shareTitle?: string | undefined
+  board?: (() => unknown) | undefined
+  /** The Chat panel's body. */
+  chat?: (() => unknown) | undefined
+  /** Below People: "Invite people". */
+  invite?: (() => unknown) | undefined
+  /** Whether your mic is on: a state the room writes, or a value with `onMic`. */
+  mic?: State<boolean> | boolean | undefined
+  /** Whether your camera is on: a state the room writes, or a value with `onCamera`. */
+  camera?: State<boolean> | boolean | undefined
+  /** Whether your hand is raised: a state the room writes, or a value with `onHand`. */
+  hand?: State<boolean> | boolean | undefined
+  /** Whether you are sharing your screen: a state the room writes, or a value with `onShare`. */
+  sharing?: State<boolean> | boolean | undefined
+  /** The open side panel, `people` or `chat`, or null for none. */
+  sidebar?: State<'people' | 'chat' | null> | 'people' | 'chat' | null | undefined
+  /** The emoji the React button sends. Default 🎉. */
+  reaction?: string | undefined
+  /** Called with the mic's new state. Start or stop the track here. */
+  onMic?: ((on: boolean) => void) | undefined
+  /** Called with the camera's new state. Start or stop the track here. */
+  onCamera?: ((on: boolean) => void) | undefined
+  /** Called with `true` when you raise your hand and `false` when you lower it. */
+  onHand?: ((on: boolean) => void) | undefined
+  /** Called with `true` to start sharing your screen and `false` to stop. */
+  onShare?: ((on: boolean) => void) | undefined
+  /** Called with the emoji when you react. */
+  onReact?: ((emoji: string) => void) | undefined
+  /** Called when Leave is pressed. */
+  onLeave?: (() => void) | undefined
+  /** More: replaces the phone's default, which opens the People and Chat panel. */
+  onMore?: (() => void) | undefined
+}
+
+/**
+ * MeetingRoom (07 §3): header, stage in four layouts, sidebar, ControlBar. A dark island unless told otherwise. Speaker
+ * follows the active speaker with a 1.5 s hold, off-screen video pauses, hands are announced and speakers aren't.
+ */
+export function MeetingRoom({ title, participants, self, layout, onLayoutChange, timer, recording, live = 'live', compact, theme = 'dark', video, share, presenter, shareTitle = 'Shared screen', board, chat, invite, mic, camera, hand, sharing, sidebar, reaction = '🎉', onMic, onCamera, onHand, onShare, onReact, onLeave, onMore }: MeetingRoomProps) {
+  const people = derived(() => val<Participant[]>(participants) ?? [])
+  const narrow = state(false)
+  const phone = derived(() => compact ?? narrow.value)
+  const chosen = held<MeetingLayout>(() => layout, untrack(() => compact) ? 'speaker' : 'gallery', () => onLayoutChange)
+  const micOn = held<boolean>(() => mic, true, () => onMic)
+  const camOn = held<boolean>(() => camera, true, () => onCamera)
+  const handUp = held<boolean>(() => hand, false, () => onHand)
+  const sharingOn = held<boolean>(() => sharing, false, () => onShare)
+  const side = held<'people' | 'chat' | null>(() => sidebar, null)
+  const L = derived<MeetingLayout>(() => (sharingOn.value ? 'presentation' : phone.value && chosen.value === 'gallery' ? 'speaker' : chosen.value))
+  const speaking = derived(() => people.value.find(p => p.isSpeaking)?.id)
+  const speaker = state<string | undefined>(untrack(() => speaking.value ?? people.value[0]?.id))
+  const main = derived(() => people.value.find(p => p.id === speaker.value) ?? people.value[0])
+  const others = derived(() => people.value.filter(p => p.id !== main.value?.id))
+  const me = derived<Participant>(() => ({ ...self, isMuted: !micOn.value, handRaised: handUp.value, isCamOn: camOn.value }))
+  const cols = derived(() => galleryCols(people.value.length))
+  const network = derived<LiveState>(() => { const s = val<string>(live); return s === 'open' || s === 'live' ? 'live' : s === 'reconnecting' ? 'reconnecting' : s === 'connecting' ? 'connecting' : 'offline' })
+  const netWords = derived(() => (network.value === 'live' ? 'Good connection' : network.value === 'reconnecting' ? 'Reconnecting…' : network.value === 'connecting' ? 'Connecting…' : 'Offline'))
+  const presenterText = derived(() => (sharingOn.value ? 'You are presenting' : `${presenter ?? 'Someone'} is presenting`))
+  const v = untrack(() => video)
+  let root: HTMLDivElement | undefined
+  let stage: HTMLDivElement | undefined
+
+  const say = (text: string) => announce(root!.ownerDocument, text)
+  onMount(() => {
+    const follow = speakerFollow(id => (speaker.value = id))
+    follow.update(untrack(() => speaker.value))
+    watch(() => speaking.value, s => follow.update(s))
+    watch(() => people.value, (next, prev) => { if (prev) for (const p of newHands(prev, next)) say(`${p.name} raised a hand`) })
+    onCleanup(() => follow.destroy())
+    const RO = (root!.ownerDocument.defaultView as Window & typeof globalThis).ResizeObserver
+    if (RO && untrack(() => compact) === undefined) {
+      const ro = new RO(es => { narrow.value = es[0]!.contentRect.width < 600 })
+      ro.observe(root!)
+      onCleanup(() => ro.disconnect())
+    }
+  })
+  use(pauseOffscreen, () => stage)
+  const toggle = (c: string) => {
+    if (c === 'mic') { micOn.set(!micOn.value); say(micOn.value ? 'Microphone on' : 'Microphone off') }
+    if (c === 'camera') { camOn.set(!camOn.value); say(camOn.value ? 'Camera on' : 'Camera off') }
+    if (c === 'hand') { handUp.set(!handUp.value); say(handUp.value ? 'Hand raised' : 'Hand lowered') }
+    if (c === 'share') { sharingOn.set(!sharingOn.value); say(sharingOn.value ? 'You are presenting' : 'Stopped presenting') }
+    if (c === 'chat' || c === 'people') side.set(side.value === c ? null : c)
+    if (c === 'react') { floatReaction(stage!, reaction); onReact?.(reaction); say('You reacted') }
+    if (c === 'more') { if (onMore) onMore(); else if (phone.value) side.set(side.value ? null : 'people') }
+  }
+  const closeSide = () => {
+    side.set(null)
+    root?.querySelector<HTMLElement>('[data-scope="call-controls"] [data-part="control"][tabindex="0"]')?.focus()
+  }
+  const sideKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && !root!.matches(':has([data-scope="call-controls"] :focus)')) closeSide() }
+  const pipStart = derived<PipCorner>(() => (phone.value ? 'top-right' : 'bottom-right'))
+  let pipEl: HTMLDivElement | undefined
+  use(pip, () => pipEl, () => ({ corner: pipStart.value, onMove: (c: PipCorner) => say(`Self view moved to ${c.replace('-', ' ')}`) }))
+
+  return (
+    <div ref={n => (root = n)} data-scope="room" data-part="root" data-theme={theme} role="region" aria-label={`${title} meeting`}>
+      <div data-part="header">
+        <b>{title}</b>
+        {timer !== undefined && <span data-numeric="">{timer}</span>}
+        {recording && <span data-part="rec"><span data-scope="status-dot" data-tone="critical"></span>Rec</span>}
+        <span data-part="spacer"></span>
+        {!phone.value && <LayoutPicker value={L.value} onChange={(l: MeetingLayout) => { chosen.set(l); if (sharingOn.value) sharingOn.set(false); say(`${l[0]!.toUpperCase()}${l.slice(1)} layout`) }} />}
+        <LiveStatus state={network.value} label="Connection">{phone.value ? '' : netWords.value}</LiveStatus>
+      </div>
+      <div ref={n => (stage = n)} data-part="stage" data-layout={L.value} style={`--_cols:${cols.value}`} role="group" aria-label="Participants">
+        {L.value === 'gallery' && <div data-part="tiles" role="list" aria-label="Participants">{people.value.map(p => <Tile key={p.id} p={p} video={v} role="listitem" />)}</div>}
+        {L.value === 'speaker' && main.value && <Tile key={main.value.id} p={main.value} video={v} />}
+        {L.value === 'speaker' && <div data-part="strip" role="list" aria-label="Other participants">{others.value.map(p => <Tile key={p.id} p={p} video={v} role="listitem" />)}</div>}
+        {L.value === 'presentation' && (
+          <div data-part="share">
+            <header><G name="screen" /> {presenterText.value} · {shareTitle}{sharingOn.value && <Button tone="critical" size="sm" onClick={() => toggle('share')}>Stop sharing</Button>}</header>
+            {share ? share() : <div></div>}
+          </div>
+        )}
+        {L.value === 'board' && (
+          <div data-part="share">
+            <header><G name="board" /> Whiteboard · everyone can draw</header>
+            {board ? board() : <div></div>}
+          </div>
+        )}
+        {(L.value === 'presentation' || L.value === 'board') && <div data-part="rail" role="list" aria-label="Participants">{people.value.map(p => <Tile key={p.id} p={p} video={v} role="listitem" />)}</div>}
+        <div ref={n => (pipEl = n)} data-scope="pip" role="group" aria-roledescription="draggable self view" aria-label="Self view. Arrow keys move it to a corner." tabindex="0">
+          <Tile p={me.value} self video={v} />
+        </div>
+      </div>
+      <aside data-part="sidebar" hidden={!side.value} aria-label={side.value === 'chat' ? 'Chat' : 'People'} onKeyDown={sideKey}>
+        <div data-part="app-bar">
+          <b>{side.value === 'chat' ? 'Chat' : `People · ${people.value.length + 1}`}</b>
+          <span data-part="spacer"></span>
+          {phone.value && chat && <Button emphasis="ghost" tone="neutral" size="sm" onClick={() => side.set(side.value === 'chat' ? 'people' : 'chat')}>{side.value === 'chat' ? 'People' : 'Chat'}</Button>}
+          <Button emphasis="ghost" tone="neutral" size="sm" data-icon-only="" aria-label="Close panel" onClick={closeSide}><G name="x" /></Button>
+        </div>
+        {side.value === 'chat'
+          ? (chat ? chat() : <div></div>)
+          : (
+            <ul data-part="people">
+              <Person p={me.value} sub="You" />
+              {people.value.map(p => <Person key={p.id} p={p} sub={p.role || (p.handRaised ? 'Hand raised' : p.network === 'poor' ? 'Poor connection' : 'Participant')} />)}
+            </ul>
+          )}
+        {side.value !== 'chat' && invite ? <div>{invite()}</div> : <div hidden></div>}
+      </aside>
+      <ControlBar mic={micOn.value} camera={camOn.value} sharing={sharingOn.value} hand={handUp.value} side={side.value} compact={phone.value} onToggle={toggle} onLeave={() => onLeave?.()} />
+    </div>
+  )
+}
+
+function Person({ p, sub }: { p: Participant; sub: string }) {
+  return (
+    <li>
+      <Avatar name={p.name} size="sm" style={avatarTint(p.id)} />
+      <span>{p.name}<small>{sub}</small></span>
+      {p.handRaised && <span role="img" aria-label="Hand raised"><G name="hand" /></span>}
+      {p.isMuted ? <G name="micoff" /> : <G name="mic" />}
+    </li>
+  )
+}