@joewinke/jatui 0.2.19 → 0.2.21

package/dist/meet/PreJoinLobby.svelte

@@ -0,0 +1,288 @@
+<script lang="ts">
+	/**
+	 * PreJoinLobby — the device check before joining.
+	 *
+	 * Camera/mic self-preview, display-name confirm, per-device pickers, and an
+	 * optional consent gate (checkbox slot; recording/telehealth contexts). On
+	 * "Join" it emits a {@link PreJoinResult} the route uses to exchange the join
+	 * token for a LiveKit JWT and connect.
+	 *
+	 * Uses only browser-native `getUserMedia`/`enumerateDevices` — NO
+	 * livekit-client dependency, so the lobby renders in demos and in apps that
+	 * haven't installed the peer. Media preview is stopped on unmount and before
+	 * join (the room re-acquires tracks).
+	 */
+	import type { Snippet } from 'svelte';
+	import type { PreJoinResult } from './types.js';
+
+	interface Props {
+		/** Prefilled display name (from the invite); user can edit. */
+		displayName?: string;
+		/** Whether the name field is editable. */
+		nameEditable?: boolean;
+		/** Room/meeting title shown as the heading. */
+		roomName?: string;
+		/** Require the consent checkbox before Join is enabled. */
+		consentRequired?: boolean;
+		/** Whether Join is in flight (spinner + disabled). */
+		joining?: boolean;
+		/** Start with the camera enabled. */
+		cameraDefault?: boolean;
+		/** Start with the mic enabled. */
+		micDefault?: boolean;
+		/** Consent copy slot (module-config text). Rendered beside the checkbox. */
+		consent?: Snippet;
+		/** Extra content below the actions (branding, legal, etc.). */
+		footer?: Snippet;
+		/** Fired when the user confirms and joins. */
+		onJoin?: (result: PreJoinResult) => void;
+		class?: string;
+	}
+
+	let {
+		displayName = $bindable(''),
+		nameEditable = true,
+		roomName = 'Join meeting',
+		consentRequired = false,
+		joining = false,
+		cameraDefault = true,
+		micDefault = true,
+		consent,
+		footer,
+		onJoin,
+		class: className = ''
+	}: Props = $props();
+
+	// Seed local toggles from the prop defaults once; thereafter the user drives
+	// them via the in-lobby buttons (intentional initial-value capture).
+	let cameraEnabled = $state(cameraDefault);
+	let micEnabled = $state(micDefault);
+	let consentGiven = $state(false);
+
+	let videoEl = $state<HTMLVideoElement | null>(null);
+	let stream = $state<MediaStream | null>(null);
+	let permissionError = $state<string | null>(null);
+
+	let videoDevices = $state<MediaDeviceInfo[]>([]);
+	let audioDevices = $state<MediaDeviceInfo[]>([]);
+	let videoDeviceId = $state<string>('');
+	let audioDeviceId = $state<string>('');
+
+	const canJoin = $derived(
+		displayName.trim().length > 0 && (!consentRequired || consentGiven) && !joining
+	);
+
+	function stopStream() {
+		stream?.getTracks().forEach((t) => t.stop());
+		stream = null;
+		if (videoEl) videoEl.srcObject = null;
+	}
+
+	async function acquire() {
+		if (typeof navigator === 'undefined' || !navigator.mediaDevices?.getUserMedia) {
+			permissionError = 'This browser does not support camera/microphone access.';
+			return;
+		}
+		stopStream();
+		permissionError = null;
+		if (!cameraEnabled && !micEnabled) return;
+		try {
+			const next = await navigator.mediaDevices.getUserMedia({
+				video: cameraEnabled
+					? videoDeviceId
+						? { deviceId: { exact: videoDeviceId } }
+						: true
+					: false,
+				audio: micEnabled
+					? audioDeviceId
+						? { deviceId: { exact: audioDeviceId } }
+						: true
+					: false
+			});
+			stream = next;
+			if (videoEl && cameraEnabled) {
+				videoEl.srcObject = next;
+				void videoEl.play().catch(() => {});
+			}
+			// Enumerate labelled devices now that permission is granted.
+			const devices = await navigator.mediaDevices.enumerateDevices();
+			videoDevices = devices.filter((d) => d.kind === 'videoinput');
+			audioDevices = devices.filter((d) => d.kind === 'audioinput');
+		} catch (err) {
+			permissionError =
+				err instanceof DOMException && err.name === 'NotAllowedError'
+					? 'Camera/microphone access was blocked. Enable it in your browser to preview.'
+					: 'Could not access your camera or microphone.';
+		}
+	}
+
+	// (Re)acquire whenever the enabled toggles or selected devices change.
+	$effect(() => {
+		// Track the reactive deps explicitly.
+		void cameraEnabled;
+		void micEnabled;
+		void videoDeviceId;
+		void audioDeviceId;
+		void videoEl;
+		acquire();
+		return () => stopStream();
+	});
+
+	function join() {
+		if (!canJoin) return;
+		stopStream();
+		onJoin?.({
+			displayName: displayName.trim(),
+			cameraEnabled,
+			micEnabled,
+			videoDeviceId: videoDeviceId || undefined,
+			audioDeviceId: audioDeviceId || undefined,
+			consentGiven
+		});
+	}
+</script>
+
+<div
+	class="mx-auto flex w-full max-w-4xl flex-col gap-6 bg-base-100 p-6 md:flex-row {className}"
+	style="border-radius: var(--jatui-radius-box);"
+>
+	<!-- Preview -->
+	<div class="flex-1">
+		<div
+			class="relative flex aspect-video items-center justify-center overflow-hidden bg-base-300"
+			style="border-radius: var(--jatui-radius-box);"
+		>
+			<!-- svelte-ignore a11y_media_has_caption -->
+			<video
+				bind:this={videoEl}
+				class="h-full w-full -scale-x-100 object-cover transition-opacity duration-200"
+				class:opacity-0={!cameraEnabled || !stream}
+				autoplay
+				playsinline
+				muted
+			></video>
+
+			{#if !cameraEnabled}
+				<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-base-content/50">
+					<svg class="h-10 w-10" 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 7h6M5 7a2 2 0 00-2 2v6a2 2 0 002 2h8" />
+					</svg>
+					<span class="text-sm">Camera is off</span>
+				</div>
+			{/if}
+
+			<!-- Preview device toggles -->
+			<div class="absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-2">
+				<button
+					type="button"
+					class="btn btn-circle btn-sm"
+					class:btn-error={!micEnabled}
+					class:btn-neutral={micEnabled}
+					aria-pressed={!micEnabled}
+					aria-label={micEnabled ? 'Turn microphone off' : 'Turn microphone on'}
+					onclick={() => (micEnabled = !micEnabled)}
+				>
+					{#if micEnabled}
+						<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="M19 11a7 7 0 01-14 0m7 7v3m0-3a4 4 0 004-4V5a4 4 0 00-8 0v6a4 4 0 004 4z" /></svg>
+					{:else}
+						<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>
+					{/if}
+				</button>
+				<button
+					type="button"
+					class="btn btn-circle btn-sm"
+					class:btn-error={!cameraEnabled}
+					class:btn-neutral={cameraEnabled}
+					aria-pressed={!cameraEnabled}
+					aria-label={cameraEnabled ? 'Turn camera off' : 'Turn camera on'}
+					onclick={() => (cameraEnabled = !cameraEnabled)}
+				>
+					{#if cameraEnabled}
+						<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="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>
+					{:else}
+						<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="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}
+				</button>
+			</div>
+		</div>
+
+		{#if permissionError}
+			<div class="mt-3 flex items-start gap-2 bg-warning/15 px-3 py-2 text-sm text-warning-content" style="border-radius: var(--jatui-radius-field);" role="alert">
+				<svg class="mt-0.5 h-4 w-4 shrink-0 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+				<span>{permissionError}</span>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Join form -->
+	<div class="flex w-full flex-col gap-4 md:w-72">
+		<div>
+			<h2 class="text-xl font-semibold">{roomName}</h2>
+			<p class="mt-1 text-sm text-base-content/60">Check your camera and mic, then join.</p>
+		</div>
+
+		<div>
+			<label for="meet-display-name" class="mb-1 block text-sm font-medium">Your name</label>
+			<input
+				id="meet-display-name"
+				type="text"
+				class="input input-bordered w-full"
+				style="border-radius: var(--jatui-radius-field);"
+				bind:value={displayName}
+				disabled={!nameEditable}
+				placeholder="Enter your name"
+				autocomplete="name"
+			/>
+		</div>
+
+		{#if videoDevices.length > 1}
+			<div>
+				<label for="meet-camera" class="mb-1 block text-sm font-medium">Camera</label>
+				<select id="meet-camera" class="select select-bordered w-full" style="border-radius: var(--jatui-radius-field);" bind:value={videoDeviceId}>
+					<option value="">Default camera</option>
+					{#each videoDevices as d (d.deviceId)}
+						<option value={d.deviceId}>{d.label || 'Camera'}</option>
+					{/each}
+				</select>
+			</div>
+		{/if}
+
+		{#if audioDevices.length > 1}
+			<div>
+				<label for="meet-mic" class="mb-1 block text-sm font-medium">Microphone</label>
+				<select id="meet-mic" class="select select-bordered w-full" style="border-radius: var(--jatui-radius-field);" bind:value={audioDeviceId}>
+					<option value="">Default microphone</option>
+					{#each audioDevices as d (d.deviceId)}
+						<option value={d.deviceId}>{d.label || 'Microphone'}</option>
+					{/each}
+				</select>
+			</div>
+		{/if}
+
+		{#if consentRequired}
+			<label class="flex cursor-pointer items-start gap-2 text-sm">
+				<input type="checkbox" class="checkbox checkbox-sm mt-0.5" bind:checked={consentGiven} />
+				<span class="text-base-content/70">
+					{#if consent}{@render consent()}{:else}I consent to joining this session.{/if}
+				</span>
+			</label>
+		{/if}
+
+		<button
+			type="button"
+			class="btn btn-primary w-full"
+			disabled={!canJoin}
+			aria-busy={joining}
+			onclick={join}
+		>
+			{#if joining}
+				<span class="loading loading-spinner loading-sm"></span>
+				Joining…
+			{:else}
+				Join now
+			{/if}
+		</button>
+
+		{#if footer}{@render footer()}{/if}
+	</div>
+</div>

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

@@ -0,0 +1,41 @@
+/**
+     * PreJoinLobby — the device check before joining.
+     *
+     * Camera/mic self-preview, display-name confirm, per-device pickers, and an
+     * optional consent gate (checkbox slot; recording/telehealth contexts). On
+     * "Join" it emits a {@link PreJoinResult} the route uses to exchange the join
+     * token for a LiveKit JWT and connect.
+     *
+     * Uses only browser-native `getUserMedia`/`enumerateDevices` — NO
+     * livekit-client dependency, so the lobby renders in demos and in apps that
+     * haven't installed the peer. Media preview is stopped on unmount and before
+     * join (the room re-acquires tracks).
+     */
+import type { Snippet } from 'svelte';
+import type { PreJoinResult } from './types.js';
+interface Props {
+    /** Prefilled display name (from the invite); user can edit. */
+    displayName?: string;
+    /** Whether the name field is editable. */
+    nameEditable?: boolean;
+    /** Room/meeting title shown as the heading. */
+    roomName?: string;
+    /** Require the consent checkbox before Join is enabled. */
+    consentRequired?: boolean;
+    /** Whether Join is in flight (spinner + disabled). */
+    joining?: boolean;
+    /** Start with the camera enabled. */
+    cameraDefault?: boolean;
+    /** Start with the mic enabled. */
+    micDefault?: boolean;
+    /** Consent copy slot (module-config text). Rendered beside the checkbox. */
+    consent?: Snippet;
+    /** Extra content below the actions (branding, legal, etc.). */
+    footer?: Snippet;
+    /** Fired when the user confirms and joins. */
+    onJoin?: (result: PreJoinResult) => void;
+    class?: string;
+}
+declare const PreJoinLobby: import("svelte").Component<Props, {}, "displayName">;
+type PreJoinLobby = ReturnType<typeof PreJoinLobby>;
+export default PreJoinLobby;

package/dist/meet/RecordingBadge.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	/**
+	 * RecordingBadge — always-visible recording indicator.
+	 *
+	 * When a meeting is being recorded every participant must see it at all times
+	 * (consent/compliance requirement, PRD §4.3). Render this fixed in the room
+	 * chrome; it shows a pulsing red dot + "Recording" label with an `aria-live`
+	 * announcement, and renders nothing when `recording` is false.
+	 */
+	interface Props {
+		/** Whether recording is currently active. */
+		recording: boolean;
+		/** Optional label override (terminology map: "Recording" | "Grabando" …). */
+		label?: string;
+		/** Compact dot-only variant for tight chrome. */
+		compact?: boolean;
+		class?: string;
+	}
+
+	let { recording, label = 'Recording', compact = false, class: className = '' }: Props = $props();
+
+	const reducedMotion =
+		typeof window !== 'undefined' &&
+		window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+</script>
+
+{#if recording}
+	<div
+		class="flex items-center gap-2 bg-error/90 px-2.5 py-1 font-semibold text-error-content {className}"
+		style="border-radius: var(--jatui-radius-field);"
+		role="status"
+		aria-live="polite"
+	>
+		<span class="relative flex h-2.5 w-2.5">
+			{#if !reducedMotion}
+				<span
+					class="absolute inline-flex h-full w-full animate-ping rounded-full bg-error-content opacity-75"
+				></span>
+			{/if}
+			<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-error-content"></span>
+		</span>
+		{#if !compact}
+			<span class="text-xs tracking-wide uppercase">{label}</span>
+		{:else}
+			<span class="sr-only">{label}</span>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,20 @@
+/**
+ * RecordingBadge — always-visible recording indicator.
+ *
+ * When a meeting is being recorded every participant must see it at all times
+ * (consent/compliance requirement, PRD §4.3). Render this fixed in the room
+ * chrome; it shows a pulsing red dot + "Recording" label with an `aria-live`
+ * announcement, and renders nothing when `recording` is false.
+ */
+interface Props {
+    /** Whether recording is currently active. */
+    recording: boolean;
+    /** Optional label override (terminology map: "Recording" | "Grabando" …). */
+    label?: string;
+    /** Compact dot-only variant for tight chrome. */
+    compact?: boolean;
+    class?: string;
+}
+declare const RecordingBadge: import("svelte").Component<Props, {}, "">;
+type RecordingBadge = ReturnType<typeof RecordingBadge>;
+export default RecordingBadge;

package/dist/meet/VideoTile.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	/**
+	 * VideoTile — one participant's video surface.
+	 *
+	 * Renders a MediaStreamTrack into a muted, autoplaying <video>, or an
+	 * avatar/initials placeholder when the camera is off. Overlays the name,
+	 * a mic-muted badge, a screen-share badge, and a speaking ring. Purely
+	 * presentational: it takes a {@link MeetParticipant} view-model, so demos
+	 * can drive it with a mocked participant and no LiveKit server.
+	 */
+	import type { MeetParticipant } from './types.js';
+
+	interface Props {
+		/** The participant to render. */
+		participant: MeetParticipant;
+		/** Render the local participant's own tile mirrored (selfie view). */
+		mirror?: boolean;
+		/** Compact roster/filmstrip variant — smaller badges. */
+		size?: 'sm' | 'md';
+		class?: string;
+	}
+
+	let { participant, mirror = false, size = 'md', class: className = '' }: Props = $props();
+
+	let videoEl = $state<HTMLVideoElement | null>(null);
+
+	// The track to attach: screen share wins over camera when active.
+	const activeTrack = $derived(
+		participant.isScreenSharing && participant.screenTrack
+			? participant.screenTrack
+			: participant.videoTrack ?? null
+	);
+
+	const showVideo = $derived(
+		!!activeTrack && (participant.isScreenSharing || !participant.cameraOff)
+	);
+
+	const initials = $derived(
+		participant.name
+			.split(/\s+/)
+			.filter(Boolean)
+			.slice(0, 2)
+			.map((w) => w[0]?.toUpperCase() ?? '')
+			.join('') || '?'
+	);
+
+	// Attach / detach the MediaStreamTrack whenever it changes.
+	$effect(() => {
+		const el = videoEl;
+		const track = activeTrack;
+		if (!el) return;
+		if (track) {
+			const stream = new MediaStream([track]);
+			el.srcObject = stream;
+			// Autoplay can reject if the tab isn't yet interacted with; ignore.
+			void el.play().catch(() => {});
+			return () => {
+				el.srcObject = null;
+			};
+		} else {
+			el.srcObject = null;
+		}
+	});
+
+	const badgeSize = $derived(size === 'sm' ? 'text-[0.65rem] px-1.5 py-0.5' : 'text-xs px-2 py-1');
+</script>
+
+<div
+	class="relative flex items-center justify-center overflow-hidden bg-base-300 text-base-content aspect-video {className}"
+	class:ring-2={participant.isSpeaking}
+	class:ring-success={participant.isSpeaking}
+	style="border-radius: var(--jatui-radius-box);"
+	aria-label={`${participant.name}${participant.micMuted ? ', muted' : ''}${participant.cameraOff ? ', camera off' : ''}`}
+>
+	<!-- svelte-ignore a11y_media_has_caption -->
+	<video
+		bind:this={videoEl}
+		class="h-full w-full object-cover transition-opacity duration-200"
+		class:opacity-0={!showVideo}
+		class:-scale-x-100={mirror && !participant.isScreenSharing}
+		autoplay
+		playsinline
+		muted={participant.isLocal}
+	></video>
+
+	{#if !showVideo}
+		<!-- Camera-off placeholder: avatar or initials -->
+		<div class="absolute inset-0 flex items-center justify-center bg-base-300">
+			{#if participant.avatarUrl}
+				<img
+					src={participant.avatarUrl}
+					alt={participant.name}
+					class="h-16 w-16 rounded-full object-cover"
+				/>
+			{:else}
+				<div
+					class="flex h-16 w-16 items-center justify-center rounded-full bg-primary/15 text-xl font-semibold text-primary"
+				>
+					{initials}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Bottom-left: name + mic state -->
+	<div
+		class="absolute bottom-2 left-2 flex items-center gap-1.5 bg-base-100/70 font-medium backdrop-blur-sm {badgeSize}"
+		style="border-radius: var(--jatui-radius-field);"
+	>
+		{#if participant.micMuted}
+			<svg
+				class="h-3.5 w-3.5 shrink-0 text-error"
+				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-3.5 w-3.5 shrink-0 text-base-content/70"
+				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}
+		<span class="max-w-[10rem] truncate">{participant.name}{participant.isLocal ? ' (you)' : ''}</span>
+	</div>
+
+	<!-- Top-right badges: screen share, connection quality -->
+	{#if participant.isScreenSharing || participant.connectionQuality === 'poor'}
+		<div class="absolute top-2 right-2 flex items-center gap-1.5">
+			{#if participant.isScreenSharing}
+				<span
+					class="flex items-center gap-1 bg-info/85 text-info-content {badgeSize}"
+					style="border-radius: var(--jatui-radius-field);"
+				>
+					<svg class="h-3 w-3" 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>
+					Sharing
+				</span>
+			{/if}
+			{#if participant.connectionQuality === 'poor'}
+				<span
+					class="flex items-center bg-warning/85 text-warning-content {badgeSize}"
+					style="border-radius: var(--jatui-radius-field);"
+					title="Weak connection"
+				>
+					<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+						<path d="M2 22h3v-6H2v6zm5 0h3V10H7v12zm5 0h3V4h-3v18z" opacity="0.4" />
+					</svg>
+				</span>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,22 @@
+/**
+     * VideoTile — one participant's video surface.
+     *
+     * Renders a MediaStreamTrack into a muted, autoplaying <video>, or an
+     * avatar/initials placeholder when the camera is off. Overlays the name,
+     * a mic-muted badge, a screen-share badge, and a speaking ring. Purely
+     * presentational: it takes a {@link MeetParticipant} view-model, so demos
+     * can drive it with a mocked participant and no LiveKit server.
+     */
+import type { MeetParticipant } from './types.js';
+interface Props {
+    /** The participant to render. */
+    participant: MeetParticipant;
+    /** Render the local participant's own tile mirrored (selfie view). */
+    mirror?: boolean;
+    /** Compact roster/filmstrip variant — smaller badges. */
+    size?: 'sm' | 'md';
+    class?: string;
+}
+declare const VideoTile: import("svelte").Component<Props, {}, "">;
+type VideoTile = ReturnType<typeof VideoTile>;
+export default VideoTile;

package/dist/meet/index.d.ts

@@ -0,0 +1,9 @@
+export { default as MeetingRoom } from './MeetingRoom.svelte';
+export { default as VideoTile } from './VideoTile.svelte';
+export { default as ControlBar } from './ControlBar.svelte';
+export { default as PreJoinLobby } from './PreJoinLobby.svelte';
+export { default as ParticipantList } from './ParticipantList.svelte';
+export { default as RecordingBadge } from './RecordingBadge.svelte';
+export { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from './livekit.js';
+export type { LiveKitModule } from './livekit.js';
+export type { MeetRole, MeetConnectionQuality, MeetParticipant, MeetHostActions, MeetLocalControls, PreJoinResult, MeetRoomState, MeetLayout } from './types.js';

package/dist/meet/index.js

@@ -0,0 +1,20 @@
+// Subpath entry: @joewinke/jatui/meet — real-time meeting UI.
+//
+// `livekit-client` is an OPTIONAL peer dependency. It is loaded lazily (see
+// ./livekit.ts) ONLY by the container components that connect to a room, and
+// never imported at module scope — so a consumer that renders only the
+// presentational tiles (or never imports this subpath at all) does not need it
+// installed. This mirrors the d3/cobe/@xyflow optional-peer pattern; the
+// components are intentionally kept out of the main `jatui` barrel so barrel
+// consumers never pull livekit-client.
+//
+//   import { MeetingRoom, ControlBar } from '@joewinke/jatui/meet';
+// Components
+export { default as MeetingRoom } from './MeetingRoom.svelte';
+export { default as VideoTile } from './VideoTile.svelte';
+export { default as ControlBar } from './ControlBar.svelte';
+export { default as PreJoinLobby } from './PreJoinLobby.svelte';
+export { default as ParticipantList } from './ParticipantList.svelte';
+export { default as RecordingBadge } from './RecordingBadge.svelte';
+// Optional-peer loader (for the consuming route to connect a Room)
+export { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from './livekit.js';

package/dist/meet/livekit.d.ts

@@ -0,0 +1,39 @@
+/**
+ * livekit-client optional-peer loader.
+ *
+ * `livekit-client` is an OPTIONAL peer dependency (peerDependenciesMeta), so a
+ * consumer that never touches `@joewinke/jatui/meet` need not install it. To
+ * keep that promise we NEVER import runtime values from the package at module
+ * scope — a static `import { Room } from 'livekit-client'` would make the whole
+ * subpath fail to resolve at import time in a consumer without the peer (the
+ * d3 lesson: the missing module resolves to `undefined` / a bundler stub and
+ * `Room` is `(void 0)` → "is not a constructor"). Instead every runtime value
+ * comes through `loadLiveKit()`, a cached lazy `import()` that throws a clear,
+ * actionable error when the peer is absent.
+ *
+ * Types are safe to import statically with `import type` — they are fully
+ * erased at compile time and never emit a runtime `require`/`import`.
+ */
+import type { Room as LKRoom, RoomEvent as LKRoomEvent, Track as LKTrack, LocalParticipant as LKLocalParticipant, RemoteParticipant as LKRemoteParticipant, Participant as LKParticipant, ConnectionState as LKConnectionState } from 'livekit-client';
+/** The runtime shape of the `livekit-client` module we depend on. */
+export interface LiveKitModule {
+    Room: typeof import('livekit-client').Room;
+    RoomEvent: typeof import('livekit-client').RoomEvent;
+    Track: typeof import('livekit-client').Track;
+    ConnectionState: typeof import('livekit-client').ConnectionState;
+    createLocalTracks: typeof import('livekit-client').createLocalTracks;
+}
+/** Thrown when a `jatui/meet` component needs `livekit-client` but it isn't installed. */
+export declare class LiveKitNotInstalledError extends Error {
+    constructor(cause?: unknown);
+}
+/**
+ * Lazily load `livekit-client`. Cached after the first call so repeated mounts
+ * share one module instance. Rejects with {@link LiveKitNotInstalledError} when
+ * the peer is missing, so callers can render a graceful fallback instead of a
+ * hard page crash.
+ */
+export declare function loadLiveKit(): Promise<LiveKitModule>;
+/** True if `livekit-client` can be loaded in this environment. Never throws. */
+export declare function isLiveKitAvailable(): Promise<boolean>;
+export type { LKRoom, LKRoomEvent, LKTrack, LKLocalParticipant, LKRemoteParticipant, LKParticipant, LKConnectionState };