@joewinke/jatui 0.2.19 → 0.2.20

package/CLAUDE.md

@@ -74,6 +74,43 @@ Then import:
 |-----------|---------|-----------|
 | `MediaWorkbench` | Full-featured image editor modal — upload, AI generate, AI edit, background removal, annotation canvas. **Preferred over `SmartImageEditor` for new image fields.** Two-column modal: preview left, 4 action tabs right (Generate, Edit, Remove BG, Annotate). Save uploads blob to `uploadEndpoint` or emits `onComplete`. Requires proxy endpoints from jst-23w1l.2. | `value` (bindable `string \| null`), `uploadEndpoint?` (default `/api/media`), `onComplete?`, `accept?` |
 
+### Meetings (subpath: `jatui/meet`)
+
+Real-time video-meeting UI. `livekit-client` is an **OPTIONAL peer dep**, lazily
+imported (`loadLiveKit()`) only by container components and never at module scope —
+so consumers who never render meeting UI don't install it (the d3/cobe/@xyflow
+pattern). Import via the subpath, NOT the main barrel:
+
+```svelte
+<script>
+  import { MeetingRoom, ControlBar, PreJoinLobby } from 'jatui/meet'
+  import type { MeetParticipant } from 'jatui/meet'
+</script>
+```
+
+The presentational components (`VideoTile`, `ControlBar`, `ParticipantList`,
+`RecordingBadge`) are driven by plain `MeetParticipant`/`MeetRoomState` view-models
+(no LiveKit types), so a route adapts real LiveKit tracks into them and demos mock
+them with no server.
+
+| Component | Purpose | Key Props |
+|-----------|---------|-----------|
+| `PreJoinLobby` | Device check before joining — camera/mic self-preview (browser-native, no LiveKit), display-name confirm, device pickers, optional consent gate (`consent` snippet slot). Emits `PreJoinResult` on join. | `displayName` (bindable), `roomName`, `consentRequired`, `joining`, `cameraDefault`, `micDefault`, `onJoin` |
+| `MeetingRoom` | In-room layout shell — responsive grid, auto focus/filmstrip layout on screen-share. Snippet slots: `controls`, `panel`, `chrome`. | `participants`, `layout`, `focusedId`, `showPanel`, `controls`/`panel`/`chrome` (snippets) |
+| `VideoTile` | One participant's video surface — attaches a `MediaStreamTrack`, camera-off avatar/initials, mic/share/connection badges, speaking ring. | `participant: MeetParticipant`, `mirror`, `size` |
+| `ControlBar` | In-room action bar — mic/cam/screenshare/leave + host menu (lock, record, end-for-all). Real buttons, `aria-pressed`. | `local: MeetParticipant`, `isHost`, `room: MeetRoomState`, `controls: MeetLocalControls`, `hostActions: MeetHostActions` |
+| `ParticipantList` | Roster sidebar — mic/camera state, per-participant host actions (mute, remove) on hover/focus. | `participants`, `isHost`, `hostActions`, `title` |
+| `RecordingBadge` | Always-visible pulsing recording indicator with `aria-live`; renders nothing when off (consent-safe room chrome). | `recording`, `label`, `compact` |
+
+**Types & loader:**
+```typescript
+import type {
+  MeetParticipant, MeetRole, MeetRoomState, MeetLayout,
+  MeetHostActions, MeetLocalControls, PreJoinResult
+} from 'jatui/meet'
+import { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from 'jatui/meet'
+```
+
 ### Layout
 
 | Component | Purpose | Key Props |

package/dist/meet/ControlBar.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	/**
+	 * ControlBar — the in-room action bar.
+	 *
+	 * Local controls (always): mute mic, toggle camera, screen share, leave.
+	 * Host controls (when `isHost`): lock room, start/stop recording, end for
+	 * all — surfaced as a "Host" dropdown. Per-participant host actions
+	 * (mute/remove) live in ParticipantList, not here.
+	 *
+	 * All controls are real <button>s with aria-pressed / aria-label and a
+	 * red "Leave" that stands apart. Presentational: it reflects the local
+	 * participant + room state you pass and calls back on intent.
+	 */
+	import type { MeetParticipant, MeetRoomState, MeetHostActions, MeetLocalControls } from './types.js';
+
+	interface Props {
+		/** The local participant (drives mic/cam/share pressed state). */
+		local: MeetParticipant;
+		/** Whether the local participant is a host (shows host controls). */
+		isHost?: boolean;
+		/** Current room state (recording/locked) for host toggles. */
+		room?: MeetRoomState;
+		/** Whether screen sharing is supported/allowed in this context. */
+		allowScreenShare?: boolean;
+		/** Local-control callbacks. */
+		controls?: MeetLocalControls;
+		/** Host-action callbacks. */
+		hostActions?: MeetHostActions;
+		class?: string;
+	}
+
+	let {
+		local,
+		isHost = false,
+		room = {},
+		allowScreenShare = true,
+		controls = {},
+		hostActions = {},
+		class: className = ''
+	}: Props = $props();
+
+	const recording = $derived(room.recording ?? false);
+	const locked = $derived(room.locked ?? false);
+</script>
+
+<div
+	class="flex items-center justify-center gap-2 bg-base-200/95 px-3 py-2 backdrop-blur-sm {className}"
+	style="border-radius: var(--jatui-radius-box);"
+	role="toolbar"
+	aria-label="Meeting controls"
+>
+	<!-- Mic -->
+	<button
+		type="button"
+		class="btn btn-circle"
+		class:btn-error={local.micMuted}
+		class:btn-ghost={!local.micMuted}
+		aria-pressed={local.micMuted}
+		aria-label={local.micMuted ? 'Unmute microphone' : 'Mute microphone'}
+		onclick={() => controls.onToggleMic?.(!local.micMuted)}
+	>
+		{#if local.micMuted}
+			<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 5.586A2 2 0 004 7v6a4 4 0 004 4m2.828-1.172A4 4 0 0016 13V9m0-4a2 2 0 00-3.414-1.414M3 3l18 18" />
+			</svg>
+		{:else}
+			<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-14 0m7 7v3m0-3a4 4 0 004-4V5a4 4 0 00-8 0v6a4 4 0 004 4z" />
+			</svg>
+		{/if}
+	</button>
+
+	<!-- Camera -->
+	<button
+		type="button"
+		class="btn btn-circle"
+		class:btn-error={local.cameraOff}
+		class:btn-ghost={!local.cameraOff}
+		aria-pressed={local.cameraOff}
+		aria-label={local.cameraOff ? 'Turn camera on' : 'Turn camera off'}
+		onclick={() => controls.onToggleCamera?.(!local.cameraOff)}
+	>
+		{#if local.cameraOff}
+			<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M3 3l18 18M5 7h6m4 0v0M5 7a2 2 0 00-2 2v6a2 2 0 002 2h8" />
+			</svg>
+		{:else}
+			<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14v-4zM5 7h8a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2z" />
+			</svg>
+		{/if}
+	</button>
+
+	<!-- Screen share -->
+	{#if allowScreenShare}
+		<button
+			type="button"
+			class="btn btn-circle"
+			class:btn-info={local.isScreenSharing}
+			class:btn-ghost={!local.isScreenSharing}
+			aria-pressed={local.isScreenSharing ?? false}
+			aria-label={local.isScreenSharing ? 'Stop sharing screen' : 'Share screen'}
+			onclick={() => controls.onToggleScreenShare?.(!local.isScreenSharing)}
+		>
+			<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+			</svg>
+		</button>
+	{/if}
+
+	{#if isHost}
+		<div class="mx-1 h-8 w-px bg-base-content/15"></div>
+
+		<!-- Host controls dropdown -->
+		<div class="dropdown dropdown-top dropdown-end">
+			<div
+				tabindex="0"
+				role="button"
+				class="btn btn-ghost gap-1.5"
+				aria-label="Host controls"
+			>
+				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+				</svg>
+				<span class="hidden sm:inline">Host</span>
+			</div>
+			<ul
+				class="dropdown-content menu z-[1] mb-2 w-56 gap-0.5 bg-base-100 p-2 shadow-lg"
+				style="border-radius: var(--jatui-radius-box);"
+			>
+				<li>
+					<button type="button" onclick={() => hostActions.onToggleLock?.(!locked)}>
+						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+						</svg>
+						{locked ? 'Unlock room' : 'Lock room'}
+					</button>
+				</li>
+				<li>
+					<button
+						type="button"
+						class={recording ? 'text-error' : ''}
+						onclick={() => hostActions.onToggleRecording?.(!recording)}
+					>
+						<span class="inline-block h-2.5 w-2.5 rounded-full" class:bg-error={recording} class:bg-base-content={!recording} style={recording ? '' : 'opacity:0.4'}></span>
+						{recording ? 'Stop recording' : 'Start recording'}
+					</button>
+				</li>
+				<li>
+					<button type="button" class="text-error" onclick={() => hostActions.onEndForAll?.()}>
+						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21h18M5.636 5.636a9 9 0 1012.728 0M12 3v9" />
+						</svg>
+						End for all
+					</button>
+				</li>
+			</ul>
+		</div>
+	{/if}
+
+	<div class="mx-1 h-8 w-px bg-base-content/15"></div>
+
+	<!-- Leave -->
+	<button
+		type="button"
+		class="btn btn-error gap-2"
+		aria-label="Leave meeting"
+		onclick={() => controls.onLeave?.()}
+	>
+		<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+		</svg>
+		<span class="hidden sm:inline">Leave</span>
+	</button>
+</div>

package/dist/meet/ControlBar.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+     * ControlBar — the in-room action bar.
+     *
+     * Local controls (always): mute mic, toggle camera, screen share, leave.
+     * Host controls (when `isHost`): lock room, start/stop recording, end for
+     * all — surfaced as a "Host" dropdown. Per-participant host actions
+     * (mute/remove) live in ParticipantList, not here.
+     *
+     * All controls are real <button>s with aria-pressed / aria-label and a
+     * red "Leave" that stands apart. Presentational: it reflects the local
+     * participant + room state you pass and calls back on intent.
+     */
+import type { MeetParticipant, MeetRoomState, MeetHostActions, MeetLocalControls } from './types.js';
+interface Props {
+    /** The local participant (drives mic/cam/share pressed state). */
+    local: MeetParticipant;
+    /** Whether the local participant is a host (shows host controls). */
+    isHost?: boolean;
+    /** Current room state (recording/locked) for host toggles. */
+    room?: MeetRoomState;
+    /** Whether screen sharing is supported/allowed in this context. */
+    allowScreenShare?: boolean;
+    /** Local-control callbacks. */
+    controls?: MeetLocalControls;
+    /** Host-action callbacks. */
+    hostActions?: MeetHostActions;
+    class?: string;
+}
+declare const ControlBar: import("svelte").Component<Props, {}, "">;
+type ControlBar = ReturnType<typeof ControlBar>;
+export default ControlBar;

package/dist/meet/MeetingRoom.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	/**
+	 * MeetingRoom — the in-room layout shell.
+	 *
+	 * Arranges participant tiles in a responsive grid, or a focus layout (one
+	 * large speaker/screen-share + a filmstrip). Reserves snippet slots for the
+	 * control bar, the participant panel, and room chrome (e.g. RecordingBadge)
+	 * so the consuming route wires behaviour while jatui owns the layout.
+	 *
+	 * Presentational: it renders whatever {@link MeetParticipant}[] you pass, so
+	 * a demo drives it with mocked participants — no LiveKit server needed. The
+	 * `/meet/[token]` route adapts real LiveKit tracks into these view-models.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { MeetParticipant, MeetLayout } from './types.js';
+	import VideoTile from './VideoTile.svelte';
+
+	interface Props {
+		/** Participants to lay out (local + remotes). */
+		participants: MeetParticipant[];
+		/** Layout mode. `focus` auto-selects when someone shares a screen. */
+		layout?: MeetLayout;
+		/** Explicit focused participant id (overrides auto-focus). */
+		focusedId?: string;
+		/** Bottom control bar slot (usually <ControlBar />). */
+		controls?: Snippet;
+		/** Side/overlay participant panel slot (usually <ParticipantList />). */
+		panel?: Snippet;
+		/** Whether the side panel is shown. */
+		showPanel?: boolean;
+		/** Top-chrome slot — recording badge, room name, timer, lock icon. */
+		chrome?: Snippet;
+		class?: string;
+	}
+
+	let {
+		participants,
+		layout = 'grid',
+		focusedId,
+		controls,
+		panel,
+		showPanel = false,
+		chrome,
+		class: className = ''
+	}: Props = $props();
+
+	// A screen-share forces focus layout onto that participant unless overridden.
+	const sharer = $derived(participants.find((p) => p.isScreenSharing));
+	const effectiveLayout = $derived<MeetLayout>(sharer ? 'focus' : layout);
+
+	const focused = $derived(
+		participants.find((p) => p.id === focusedId) ??
+			sharer ??
+			participants.find((p) => p.isSpeaking) ??
+			participants[0]
+	);
+
+	const filmstrip = $derived(
+		effectiveLayout === 'focus' ? participants.filter((p) => p.id !== focused?.id) : []
+	);
+
+	// Grid column count grows with participant count — capped for readability.
+	const gridCols = $derived.by(() => {
+		const n = participants.length;
+		if (n <= 1) return 'grid-cols-1';
+		if (n <= 4) return 'grid-cols-2';
+		if (n <= 9) return 'grid-cols-2 sm:grid-cols-3';
+		return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4';
+	});
+</script>
+
+<div class="relative flex h-full min-h-0 flex-col bg-base-300 {className}">
+	<!-- Top chrome (recording badge, room name) -->
+	{#if chrome}
+		<div class="pointer-events-none absolute top-0 right-0 left-0 z-20 flex items-start justify-between p-3">
+			<div class="pointer-events-auto flex items-center gap-2">
+				{@render chrome()}
+			</div>
+		</div>
+	{/if}
+
+	<div class="flex min-h-0 flex-1">
+		<!-- Stage -->
+		<div class="relative min-w-0 flex-1 p-3">
+			{#if effectiveLayout === 'focus' && focused}
+				<div class="flex h-full min-h-0 flex-col gap-3">
+					<div class="min-h-0 flex-1">
+						<VideoTile participant={focused} mirror={focused.isLocal} class="h-full w-full" />
+					</div>
+					{#if filmstrip.length > 0}
+						<div class="flex shrink-0 gap-2 overflow-x-auto pb-1">
+							{#each filmstrip as p (p.id)}
+								<div class="w-40 shrink-0">
+									<VideoTile participant={p} mirror={p.isLocal} size="sm" />
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<div class="grid h-full min-h-0 auto-rows-fr gap-3 {gridCols}">
+					{#each participants as p (p.id)}
+						<VideoTile participant={p} mirror={p.isLocal} />
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Side panel -->
+		{#if showPanel && panel}
+			<div class="w-72 shrink-0 border-l border-base-content/10 p-3">
+				{@render panel()}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Bottom controls -->
+	{#if controls}
+		<div class="z-20 flex shrink-0 items-center justify-center p-3">
+			{@render controls()}
+		</div>
+	{/if}
+</div>

package/dist/meet/MeetingRoom.svelte.d.ts

@@ -0,0 +1,34 @@
+/**
+     * MeetingRoom — the in-room layout shell.
+     *
+     * Arranges participant tiles in a responsive grid, or a focus layout (one
+     * large speaker/screen-share + a filmstrip). Reserves snippet slots for the
+     * control bar, the participant panel, and room chrome (e.g. RecordingBadge)
+     * so the consuming route wires behaviour while jatui owns the layout.
+     *
+     * Presentational: it renders whatever {@link MeetParticipant}[] you pass, so
+     * a demo drives it with mocked participants — no LiveKit server needed. The
+     * `/meet/[token]` route adapts real LiveKit tracks into these view-models.
+     */
+import type { Snippet } from 'svelte';
+import type { MeetParticipant, MeetLayout } from './types.js';
+interface Props {
+    /** Participants to lay out (local + remotes). */
+    participants: MeetParticipant[];
+    /** Layout mode. `focus` auto-selects when someone shares a screen. */
+    layout?: MeetLayout;
+    /** Explicit focused participant id (overrides auto-focus). */
+    focusedId?: string;
+    /** Bottom control bar slot (usually <ControlBar />). */
+    controls?: Snippet;
+    /** Side/overlay participant panel slot (usually <ParticipantList />). */
+    panel?: Snippet;
+    /** Whether the side panel is shown. */
+    showPanel?: boolean;
+    /** Top-chrome slot — recording badge, room name, timer, lock icon. */
+    chrome?: Snippet;
+    class?: string;
+}
+declare const MeetingRoom: import("svelte").Component<Props, {}, "">;
+type MeetingRoom = ReturnType<typeof MeetingRoom>;
+export default MeetingRoom;

package/dist/meet/ParticipantList.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	/**
+	 * ParticipantList — roster sidebar with per-participant host actions.
+	 *
+	 * Lists everyone in the room with mic/camera state; when `isHost`, each
+	 * remote row exposes mute + remove actions. Presentational: driven by a
+	 * plain {@link MeetParticipant}[] so demos need no server.
+	 */
+	import type { MeetParticipant, MeetHostActions } from './types.js';
+
+	interface Props {
+		/** Everyone in the room, including the local participant. */
+		participants: MeetParticipant[];
+		/** Whether the viewer is a host (enables per-row actions). */
+		isHost?: boolean;
+		/** Host-action callbacks (mute/remove). */
+		hostActions?: MeetHostActions;
+		/** Panel heading. */
+		title?: string;
+		class?: string;
+	}
+
+	let {
+		participants,
+		isHost = false,
+		hostActions = {},
+		title = 'Participants',
+		class: className = ''
+	}: Props = $props();
+
+	function initials(name: string): string {
+		return (
+			name
+				.split(/\s+/)
+				.filter(Boolean)
+				.slice(0, 2)
+				.map((w) => w[0]?.toUpperCase() ?? '')
+				.join('') || '?'
+		);
+	}
+</script>
+
+<div class="flex flex-col bg-base-100 {className}" style="border-radius: var(--jatui-radius-box);">
+	<div class="flex items-center justify-between border-b border-base-content/10 px-4 py-3">
+		<h3 class="text-sm font-semibold">{title}</h3>
+		<span class="badge badge-sm badge-ghost">{participants.length}</span>
+	</div>
+
+	<ul class="flex-1 overflow-y-auto p-2">
+		{#each participants as p (p.id)}
+			<li
+				class="group flex items-center gap-3 px-2 py-2 hover:bg-base-200"
+				style="border-radius: var(--jatui-radius-field);"
+			>
+				<!-- Avatar / initials -->
+				<div class="relative shrink-0">
+					{#if p.avatarUrl}
+						<img src={p.avatarUrl} alt={p.name} class="h-9 w-9 rounded-full object-cover" />
+					{:else}
+						<div
+							class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/15 text-xs font-semibold text-primary"
+						>
+							{initials(p.name)}
+						</div>
+					{/if}
+					{#if p.isSpeaking}
+						<span
+							class="absolute -inset-0.5 rounded-full ring-2 ring-success"
+							aria-hidden="true"
+						></span>
+					{/if}
+				</div>
+
+				<!-- Name + role -->
+				<div class="min-w-0 flex-1">
+					<div class="flex items-center gap-1.5">
+						<span class="truncate text-sm font-medium">{p.name}{p.isLocal ? ' (you)' : ''}</span>
+						{#if p.role === 'host'}
+							<span class="badge badge-xs badge-primary">Host</span>
+						{:else if p.role === 'observer'}
+							<span class="badge badge-xs badge-ghost">Observer</span>
+						{/if}
+					</div>
+					{#if p.isScreenSharing}
+						<span class="text-xs text-info">Sharing screen</span>
+					{/if}
+				</div>
+
+				<!-- Mic/cam status icons -->
+				<div class="flex items-center gap-1 text-base-content/50">
+					{#if p.micMuted}
+						<svg class="h-4 w-4 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-label="Muted" role="img">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 5.586A2 2 0 004 7v6a4 4 0 004 4m2.828-1.172A4 4 0 0016 13V9m0-4a2 2 0 00-3.414-1.414M3 3l18 18" />
+						</svg>
+					{/if}
+					{#if p.cameraOff}
+						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-label="Camera off" role="img">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M3 3l18 18M5 7h6M5 7a2 2 0 00-2 2v6a2 2 0 002 2h8" />
+						</svg>
+					{/if}
+				</div>
+
+				<!-- Host per-row actions -->
+				{#if isHost && !p.isLocal}
+					<div class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+						{#if !p.micMuted}
+							<button
+								type="button"
+								class="btn btn-ghost btn-xs btn-square"
+								aria-label={`Mute ${p.name}`}
+								onclick={() => hostActions.onMuteParticipant?.(p.id)}
+							>
+								<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 5.586A2 2 0 004 7v6a4 4 0 004 4m2.828-1.172A4 4 0 0016 13V9m0-4a2 2 0 00-3.414-1.414M3 3l18 18" />
+								</svg>
+							</button>
+						{/if}
+						<button
+							type="button"
+							class="btn btn-ghost btn-xs btn-square text-error"
+							aria-label={`Remove ${p.name}`}
+							onclick={() => hostActions.onRemoveParticipant?.(p.id)}
+						>
+							<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12" />
+							</svg>
+						</button>
+					</div>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</div>

package/dist/meet/ParticipantList.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+     * ParticipantList — roster sidebar with per-participant host actions.
+     *
+     * Lists everyone in the room with mic/camera state; when `isHost`, each
+     * remote row exposes mute + remove actions. Presentational: driven by a
+     * plain {@link MeetParticipant}[] so demos need no server.
+     */
+import type { MeetParticipant, MeetHostActions } from './types.js';
+interface Props {
+    /** Everyone in the room, including the local participant. */
+    participants: MeetParticipant[];
+    /** Whether the viewer is a host (enables per-row actions). */
+    isHost?: boolean;
+    /** Host-action callbacks (mute/remove). */
+    hostActions?: MeetHostActions;
+    /** Panel heading. */
+    title?: string;
+    class?: string;
+}
+declare const ParticipantList: import("svelte").Component<Props, {}, "">;
+type ParticipantList = ReturnType<typeof ParticipantList>;
+export default ParticipantList;