@atmo-dev/kit 0.3.0 → 0.4.0

package/dist/components/NestedComments.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { PostData } from '../social/posts.js';
+import type { ExternalEmbedProvider } from '../social/external-embeds.js';
 import type { PreferredSocialClient } from '../social/preferred-client.js';
 import NestedComments from './NestedComments.svelte';
 type $$ComponentProps = {
     comments: PostData[];
     socialClient?: PreferredSocialClient | null;
+    embedProviders?: readonly ExternalEmbedProvider[];
 };
 declare const NestedComments: import("svelte").Component<$$ComponentProps, {}, "">;
 type NestedComments = ReturnType<typeof NestedComments>;

package/dist/components/PhotoGrid.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '../utils.js';
+	import type { Photo } from '../media.js';
+	import PhotoLightbox from './PhotoLightbox.svelte';
+	export type PhotoGridProps = { photos: Photo[]; label?: string; class?: string };
+	let { photos, label = 'Photos', class: className }: PhotoGridProps = $props();
+	let revealed: Set<number> = $state(new Set());
+	let open = $state(false);
+	let index = $state(0);
+	let trigger: HTMLButtonElement | null = $state(null);
+	let visible = $derived(photos.filter((photo, i) => !photo.contentWarning || revealed.has(i)));
+	$effect(() => {
+		void photos;
+		revealed = new Set();
+		open = false;
+	});
+</script>
+
+<div class={cn('columns-2 gap-2 sm:columns-3', className)}>
+	{#each photos as photo, i (`${photo.id || photo.src}-${i}`)}
+		{#if photo.contentWarning && !revealed.has(i)}
+			<button
+				type="button"
+				class="mb-2 block w-full break-inside-avoid-column rounded-lg border border-line p-3 text-sm text-muted"
+				style:aspect-ratio={photo.width && photo.height ? `${photo.width} / ${photo.height}` : '1'}
+				onclick={() => (revealed = new Set([...revealed, i]))}
+				>Content warning · Show photo {i + 1}</button
+			>
+		{:else}
+			<button
+				type="button"
+				class="group mb-2 block w-full break-inside-avoid-column overflow-hidden rounded-lg focus-visible:ring-2 focus-visible:ring-accent-500"
+				aria-label={`View photo ${i + 1} of ${photos.length}${photo.alt ? `: ${photo.alt}` : ''}`}
+				onclick={(event) => {
+					trigger = event.currentTarget;
+					index = visible.indexOf(photo);
+					open = true;
+				}}
+			>
+				<img
+					src={photo.thumbnail || photo.src}
+					alt={photo.alt || ''}
+					loading="lazy"
+					decoding="async"
+					width={photo.width}
+					height={photo.height}
+					class="block h-auto w-full motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out motion-safe:pointer-fine:group-hover:scale-[1.02]"
+				/>
+			</button>
+		{/if}
+	{/each}
+</div>
+<PhotoLightbox photos={visible} {label} bind:open bind:index returnFocus={trigger} />

package/dist/components/PhotoGrid.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Photo } from '../media.js';
+export type PhotoGridProps = {
+    photos: Photo[];
+    label?: string;
+    class?: string;
+};
+declare const PhotoGrid: import("svelte").Component<PhotoGridProps, {}, "">;
+type PhotoGrid = ReturnType<typeof PhotoGrid>;
+export default PhotoGrid;

package/dist/components/PhotoLightbox.svelte

@@ -0,0 +1,332 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { Dialog } from 'bits-ui';
+	import { ChevronLeft, ChevronRight, X } from '@sketchyicons/svelte';
+	import Icon from './Icon.svelte';
+	import { cn } from '../utils.js';
+	import type { Photo } from '../media.js';
+	export type PhotoLightboxProps = {
+		photos: Photo[];
+		open?: boolean;
+		index?: number;
+		label?: string;
+		returnFocus?: HTMLElement | null;
+		class?: string;
+	};
+	let {
+		photos,
+		open = $bindable(false),
+		index = $bindable(0),
+		label = 'Photos',
+		returnFocus,
+		class: className
+	}: PhotoLightboxProps = $props();
+	let selected = $derived(photos[index]);
+	let viewport = $state<HTMLDivElement>();
+	// End copies make native swipes loop, without showing duplicate slides to AT.
+	let slides = $derived.by(() => {
+		const real = photos.map((photo, index) => ({ photo, index, copy: false }));
+		return real.length > 1
+			? [{ ...real[real.length - 1], copy: true }, ...real, { ...real[0], copy: true }]
+			: real;
+	});
+	let knownNode: HTMLDivElement | undefined;
+	let knownPhotos: Photo[] | undefined;
+	let knownCount = 0;
+	let acknowledgedIndex = 0;
+	let settleTimer: ReturnType<typeof setTimeout> | undefined;
+	let touching = false;
+	let suppressClick = false;
+	let drag:
+		| { pointerId: number; x: number; y: number; left: number; slot: number; moved: boolean }
+		| undefined;
+
+	function photoIndex(slot: number) {
+		return (((slot - (photos.length > 1 ? 1 : 0)) % photos.length) + photos.length) % photos.length;
+	}
+	function select(value: number) {
+		acknowledgedIndex = value;
+		index = value;
+	}
+	function resetDrag(node = viewport, restoreSnap = true) {
+		if (drag && node?.hasPointerCapture(drag.pointerId)) node.releasePointerCapture(drag.pointerId);
+		drag = undefined;
+		if (restoreSnap) node?.style.removeProperty('scroll-snap-type');
+	}
+	function align(value: number) {
+		select(value >= 0 && value < photos.length ? value : 0);
+		viewport?.scrollTo({
+			left: (index + (photos.length > 1 ? 1 : 0)) * viewport.clientWidth,
+			behavior: 'instant'
+		});
+	}
+	function move(delta: number) {
+		if (!photos.length) return;
+		resetDrag();
+		align((index + delta + photos.length) % photos.length);
+	}
+	function settled() {
+		const node = viewport;
+		if (!node?.clientWidth || touching || drag || photos.length < 2) return;
+		const slot = Math.round(node.scrollLeft / node.clientWidth);
+		if (Math.abs(node.scrollLeft - slot * node.clientWidth) > 1) return;
+		node.style.removeProperty('scroll-snap-type');
+		select(photoIndex(slot));
+		// Recenter only after scrolling stops, never underneath a finger or wheel.
+		if (slot === 0 || slot === slides.length - 1) align(index);
+	}
+	function settleSoon() {
+		clearTimeout(settleTimer);
+		// Fallback for browsers without scrollend.
+		settleTimer = setTimeout(settled, 150);
+	}
+	function scrolled() {
+		const node = viewport;
+		if (!node?.clientWidth || !photos.length) return;
+		select(photoIndex(Math.round(node.scrollLeft / node.clientWidth)));
+		if (touching) suppressClick = true;
+		settleSoon();
+	}
+	function pointerDown(event: PointerEvent) {
+		suppressClick = false;
+		// Touch and trackpads use native scrolling, including inertia and pinch zoom.
+		if (
+			event.pointerType === 'touch' ||
+			!event.isPrimary ||
+			event.button !== 0 ||
+			photos.length < 2
+		)
+			return;
+		if (drag) {
+			resetDrag();
+			return;
+		}
+		const node = viewport;
+		if (!node) return;
+		const left = node.scrollLeft;
+		node.style.scrollSnapType = 'none';
+		// Stop any previous release animation before starting another drag.
+		node.scrollTo({ left, behavior: 'instant' });
+		drag = {
+			pointerId: event.pointerId,
+			x: event.clientX,
+			y: event.clientY,
+			left,
+			slot: Math.round(node.scrollLeft / node.clientWidth),
+			moved: false
+		};
+	}
+	function pointerMove(event: PointerEvent) {
+		const node = viewport,
+			start = drag;
+		if (!node || !start || start.pointerId !== event.pointerId) return;
+		const dx = event.clientX - start.x,
+			dy = event.clientY - start.y;
+		if (!start.moved) {
+			if (Math.abs(dy) > 8 && Math.abs(dy) > Math.abs(dx)) {
+				resetDrag();
+				return;
+			}
+			if (Math.abs(dx) < 5 || Math.abs(dx) < Math.abs(dy) * 1.5) return;
+			start.moved = true;
+			node.style.scrollSnapType = 'none';
+			node.setPointerCapture(event.pointerId);
+		}
+		suppressClick = true;
+		event.preventDefault();
+		node.scrollLeft = start.left - dx;
+	}
+	function pointerUp(event: PointerEvent, cancelled = false) {
+		const node = viewport,
+			start = drag;
+		if (!node || !start || start.pointerId !== event.pointerId) return;
+		// Keep snapping disabled until the release animation reaches its target;
+		// restoring it earlier makes the browser snap back and cancel scrollTo.
+		resetDrag(node, !start.moved);
+		if (!start.moved) return;
+		suppressClick = true;
+		const dx = event.clientX - start.x;
+		const threshold = Math.min(80, Math.max(40, node.clientWidth * 0.1));
+		const delta = !cancelled && Math.abs(dx) >= threshold ? (dx < 0 ? 1 : -1) : 0;
+		const slot = Math.max(0, Math.min(slides.length - 1, start.slot + delta));
+		node.scrollTo({
+			left: slot * node.clientWidth,
+			behavior:
+				cancelled || matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth'
+		});
+		settleSoon();
+	}
+
+	$effect(() => {
+		if (!photos.length) open = false;
+		if (index < 0 || index >= photos.length) index = 0;
+	});
+	$effect(() => {
+		const node = viewport,
+			items = photos,
+			count = photos.length,
+			requested = index;
+		if (!open || !node || !count) return;
+		untrack(() => {
+			// Native scroll updates acknowledge their index, so bindings never reset a
+			// drag. External bind:index updates and replaced lists still realign.
+			if (
+				knownNode !== node ||
+				knownPhotos !== items ||
+				knownCount !== count ||
+				acknowledgedIndex !== requested
+			) {
+				resetDrag();
+				knownNode = node;
+				knownPhotos = items;
+				knownCount = count;
+				align(requested);
+			}
+		});
+	});
+	$effect(() => {
+		const node = viewport;
+		if (!node) return;
+		let width = node.clientWidth,
+			height = node.clientHeight;
+		const observer = new ResizeObserver(() => {
+			// Ignore the observer's initial notification: it must not cancel a
+			// gesture that began immediately after opening.
+			if (width === node.clientWidth && height === node.clientHeight) return;
+			width = node.clientWidth;
+			height = node.clientHeight;
+			resetDrag(node);
+			align(index);
+		});
+		observer.observe(node);
+		return () => {
+			observer.disconnect();
+			clearTimeout(settleTimer);
+			resetDrag(node);
+			touching = false;
+		};
+	});
+</script>
+
+<svelte:window
+	onkeydown={(event) => {
+		if (!open || event.altKey || event.ctrlKey || event.metaKey) return;
+		if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+			event.preventDefault();
+			move(event.key === 'ArrowLeft' ? -1 : 1);
+		}
+	}}
+/>
+
+<Dialog.Root bind:open>
+	{#if open && selected}
+		<Dialog.Portal>
+			<Dialog.Overlay class="fixed inset-0 z-50 bg-black/85" />
+			<Dialog.Content
+				aria-describedby={undefined}
+				onclick={(event) => {
+					if (suppressClick) {
+						suppressClick = false;
+						event.preventDefault();
+						return;
+					}
+					if (
+						event.target === event.currentTarget ||
+						event.target === viewport ||
+						(event.target instanceof HTMLElement &&
+							event.target.hasAttribute('data-lightbox-slide'))
+					)
+						open = false;
+				}}
+				class={cn('fixed inset-0 z-50 outline-none', className)}
+				onCloseAutoFocus={(event) => {
+					if (returnFocus?.isConnected) {
+						event.preventDefault();
+						returnFocus.focus();
+					}
+				}}
+			>
+				<Dialog.Title class="sr-only">{label} · {index + 1} / {photos.length}</Dialog.Title>
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex (Scrollable carousel needs a tab stop for Safari; arrow keys navigate photos.) -->
+				<div
+					tabindex="0"
+					bind:this={viewport}
+					data-slot="photo-lightbox-track"
+					role="group"
+					aria-label="Photos"
+					aria-roledescription="carousel"
+					dir="ltr"
+					class="flex h-full w-full snap-x snap-mandatory [scrollbar-width:none] overflow-x-auto overscroll-x-contain outline-none select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-white/70 [&::-webkit-scrollbar]:hidden"
+					onscroll={scrolled}
+					onscrollend={settled}
+					onpointerdown={pointerDown}
+					onpointermove={pointerMove}
+					onpointerup={(event) => pointerUp(event)}
+					onpointercancel={(event) => pointerUp(event, true)}
+					ontouchstart={() => {
+						touching = true;
+						suppressClick = false;
+					}}
+					ontouchend={(event) => {
+						touching = event.touches.length > 0;
+						settleSoon();
+					}}
+					ontouchcancel={() => {
+						touching = false;
+						settleSoon();
+					}}
+				>
+					{#each slides as slide, slot (slot)}
+						<div
+							data-lightbox-slide
+							role="group"
+							aria-roledescription="slide"
+							aria-label={`Photo ${slide.index + 1} of ${photos.length}`}
+							aria-hidden={slide.copy || slide.index !== index}
+							class="flex h-full min-h-0 w-full min-w-0 shrink-0 snap-start snap-always items-center justify-center"
+						>
+							<img
+								src={slide.photo.src}
+								alt={slide.photo.alt || ''}
+								draggable={false}
+								width={slide.photo.width}
+								height={slide.photo.height}
+								loading={slide.index === index ? 'eager' : 'lazy'}
+								decoding="async"
+								class="pointer-events-auto h-auto max-h-full w-auto max-w-full object-contain"
+							/>
+						</div>
+					{/each}
+				</div>
+				<p
+					role="status"
+					aria-label="Photo position"
+					class="pointer-events-none fixed right-4 bottom-4 rounded-full bg-black/60 px-3 py-1.5 text-xs text-white/90 tabular-nums"
+				>
+					{index + 1} / {photos.length}
+				</p>
+				<Dialog.Close
+					aria-label="Close dialog"
+					class="pointer-events-auto fixed top-4 right-4 inline-flex size-11 items-center justify-center rounded-full bg-black/30 text-white transition-colors hover:bg-black/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+					><Icon img={X} size={22} /></Dialog.Close
+				>
+				{#if photos.length > 1}
+					<button
+						type="button"
+						aria-label="Previous photo"
+						onclick={() => move(-1)}
+						class="pointer-events-auto fixed top-1/2 left-3 inline-flex size-11 -translate-y-1/2 items-center justify-center rounded-full bg-black/30 text-white transition-colors hover:bg-black/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:left-6"
+						><Icon img={ChevronLeft} size={26} /></button
+					>
+					<button
+						type="button"
+						aria-label="Next photo"
+						onclick={() => move(1)}
+						class="pointer-events-auto fixed top-1/2 right-3 inline-flex size-11 -translate-y-1/2 items-center justify-center rounded-full bg-black/30 text-white transition-colors hover:bg-black/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:right-6"
+						><Icon img={ChevronRight} size={26} /></button
+					>
+				{/if}
+			</Dialog.Content>
+		</Dialog.Portal>
+	{/if}
+</Dialog.Root>

package/dist/components/PhotoLightbox.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Photo } from '../media.js';
+export type PhotoLightboxProps = {
+    photos: Photo[];
+    open?: boolean;
+    index?: number;
+    label?: string;
+    returnFocus?: HTMLElement | null;
+    class?: string;
+};
+declare const PhotoLightbox: import("svelte").Component<PhotoLightboxProps, {}, "open" | "index">;
+type PhotoLightbox = ReturnType<typeof PhotoLightbox>;
+export default PhotoLightbox;

package/dist/components/PostContent.svelte

@@ -1,32 +1,50 @@
 <script lang="ts">
+	import { List, Radio, ShieldCheck, Users } from '@sketchyicons/svelte';
 	import type { PostData } from '../social/posts.js';
+	import type { PreferredSocialClient } from '../social/preferred-client.js';
+	import { socialPostUrl } from '../social/urls.js';
+	import { focus } from '../styles.js';
+	import Icon from './Icon.svelte';
 	import { richTextSegments, safeWebUrl } from '../social/richtext.js';
-	import LinkCard from './LinkCard.svelte';
+	import type { ExternalEmbedProvider } from '../social/external-embeds.js';
+	import ExternalEmbed from './ExternalEmbed.svelte';
 	import PostVideo from './PostVideo.svelte';
 	import PostContent from './PostContent.svelte';
-	let { post }: { post: PostData } = $props();
+	let {
+		post,
+		socialClient,
+		embedProviders
+	}: {
+		post: PostData;
+		socialClient?: PreferredSocialClient | null;
+		/** Defaults to YouTube and Klipy. Pass [] to render only ordinary link cards. */
+		embedProviders?: readonly ExternalEmbedProvider[];
+	} = $props();
+	const recordKinds = {
+		feed: { label: 'Feed', icon: Radio },
+		list: { label: 'List', icon: List },
+		'starter-pack': { label: 'Starter pack', icon: Users },
+		labeler: { label: 'Moderation service', icon: ShieldCheck }
+	};
 </script>
 
-<p class="text-sm leading-relaxed break-words whitespace-pre-wrap text-ink">
-	{#each richTextSegments(post.text, post.facets) as segment, index (index)}{#if segment.href}<a
-				href={segment.href}
-				target="_blank"
-				rel="noopener noreferrer nofollow"
-				class="text-action underline decoration-action/40 underline-offset-2 hover:decoration-action"
-				>{segment.text}</a
-			>{:else}{segment.text}{/if}{/each}
-</p>
+{#if post.text}<p class="text-sm leading-relaxed break-words whitespace-pre-wrap text-ink">
+		{#each richTextSegments(post.text, post.facets) as segment, index (index)}{#if segment.href}<a
+					href={segment.href}
+					target="_blank"
+					rel="noopener noreferrer nofollow"
+					class="text-action underline decoration-action/40 underline-offset-2 hover:decoration-action"
+					>{segment.text}</a
+				>{:else}{segment.text}{/if}{/each}
+	</p>{/if}
 {#each post.embeds ?? [] as embed, index (index)}
 	<div class="mt-3">
-		{#if embed.type === 'external'}<LinkCard
-				href={embed.uri}
-				meta={{ title: embed.title, description: embed.description, image: embed.image }}
-			/>
+		{#if embed.type === 'external'}<ExternalEmbed {embed} providers={embedProviders} />
 		{:else if embed.type === 'images'}<div
 				class="grid gap-1 overflow-hidden rounded-ui border border-line"
 				class:grid-cols-2={embed.images.length > 1}
 			>
-				{#each embed.images as image (image.src)}<a
+				{#each embed.images as image, imageIndex (imageIndex)}<a
 						href={safeWebUrl(image.fullsize ?? image.src)}
 						target="_blank"
 						rel="noopener noreferrer"
@@ -47,16 +65,56 @@
 				label={embed.alt}
 				href={post.href}
 			/>
+		{:else if embed.type === 'record'}
+			{@const kind = recordKinds[embed.kind]}
+			<a
+				href={safeWebUrl(embed.href)}
+				target="_blank"
+				rel="noopener noreferrer"
+				class={`flex items-start gap-3 rounded-ui border border-line p-3 text-ink no-underline hover:border-control-line ${focus}`}
+			>
+				{#if safeWebUrl(embed.image)}<img
+						src={safeWebUrl(embed.image)}
+						alt=""
+						loading="lazy"
+						class="size-10 shrink-0 rounded-ui object-cover"
+					/>{:else}<span
+						class="flex size-10 shrink-0 items-center justify-center rounded-ui bg-surface text-muted"
+						><Icon img={kind.icon} size={22} /></span
+					>{/if}
+				<div class="min-w-0">
+					<p class="truncate text-xs text-muted">
+						{kind.label}{embed.handle ? ` · @${embed.handle}` : ''}
+					</p>
+					<p class="mt-0.5 text-sm font-medium break-words">{embed.title}</p>
+					{#if embed.description}<p
+							class="mt-1 line-clamp-3 text-xs leading-relaxed break-words text-muted"
+						>
+							{embed.description}
+						</p>{/if}
+				</div>
+			</a>
 		{:else if embed.type === 'quote'}<div class="rounded-ui border border-line p-3">
 				{#if embed.post}<a
-						href={safeWebUrl(embed.post.href)}
+						href={socialPostUrl(embed.post.uri, socialClient) ?? safeWebUrl(embed.post.href)}
 						target="_blank"
 						rel="noopener noreferrer"
 						class="mb-2 block text-xs font-medium text-muted"
 						>{embed.post.author.name} · @{embed.post.author.handle}</a
-					><PostContent post={embed.post} />{:else}<p class="text-xs text-muted">
-						Post unavailable
+					><PostContent post={embed.post} {socialClient} {embedProviders} />{:else}<p
+						class="text-xs text-muted"
+					>
+						{embed.reason === 'blocked'
+							? 'Post blocked'
+							: embed.reason === 'detached'
+								? 'Quote removed'
+								: 'Post unavailable'}
 					</p>{/if}
-			</div>{/if}
+			</div>
+		{:else if embed.type === 'unsupported'}<p
+				class="rounded-ui border border-line p-3 text-xs text-muted"
+			>
+				Embed unavailable
+			</p>{/if}
 	</div>
 {/each}

package/dist/components/PostContent.svelte.d.ts

@@ -1,7 +1,12 @@
 import type { PostData } from '../social/posts.js';
+import type { PreferredSocialClient } from '../social/preferred-client.js';
+import type { ExternalEmbedProvider } from '../social/external-embeds.js';
 import PostContent from './PostContent.svelte';
 type $$ComponentProps = {
     post: PostData;
+    socialClient?: PreferredSocialClient | null;
+    /** Defaults to YouTube and Klipy. Pass [] to render only ordinary link cards. */
+    embedProviders?: readonly ExternalEmbedProvider[];
 };
 declare const PostContent: import("svelte").Component<$$ComponentProps, {}, "">;
 type PostContent = ReturnType<typeof PostContent>;

package/dist/components/StreamplacePicker.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import Input from './Input.svelte';
+	import Modal from './Modal.svelte';
+	import { parseStreamplaceLink } from '../streamplace.js';
+	import type { StreamplaceSelection } from '../streamplace.js';
+
+	export type StreamplacePickerProps = {
+		open?: boolean;
+		actor?: string | null;
+		replacing?: boolean;
+		resolveHandle: (handle: string) => Promise<string>;
+		onselect: StreamplaceSelection;
+		class?: string;
+	};
+	let {
+		open = $bindable(false),
+		actor,
+		replacing = false,
+		resolveHandle,
+		onselect,
+		class: className
+	}: StreamplacePickerProps = $props();
+	let input = $state('');
+	let error = $state('');
+	let busy = $state(false);
+	let generation = 0;
+	const id = $props.id();
+	$effect(() => {
+		void open;
+		void actor;
+		generation++;
+		input = '';
+		error = '';
+		busy = false;
+		return () => {
+			generation++;
+		};
+	});
+	async function addStream(value: string) {
+		if (busy) return;
+		const stream = parseStreamplaceLink(value);
+		if (!stream) {
+			error = 'Enter a handle or Streamplace URL.';
+			return;
+		}
+		const session = generation;
+		busy = true;
+		error = '';
+		try {
+			if (!stream.actor.startsWith('did:')) await resolveHandle(stream.actor);
+			if (session !== generation) return;
+			const message = await onselect(stream);
+			if (session !== generation) return;
+			if (message) error = message;
+			else open = false;
+		} catch {
+			if (session === generation)
+				error = 'Couldn’t add that stream. Check the handle and try again.';
+		} finally {
+			if (session === generation) busy = false;
+		}
+	}
+</script>
+
+<Modal bind:open title="Add stream" class={className}>
+	{#if actor}<Button class="mb-5" disabled={busy} onclick={() => addStream(actor!)}
+			>{replacing ? 'Use my Streamplace link instead' : 'Add my Streamplace link'}</Button
+		>{/if}
+	<label for={`${id}-handle`} class="mb-2 block text-sm"
+		>Or enter another person’s handle or Streamplace URL</label
+	>
+	<div class="flex flex-col gap-2 sm:flex-row">
+		<Input
+			id={`${id}-handle`}
+			placeholder="handle.example"
+			bind:value={input}
+			class="min-w-0 flex-1"
+			onkeydown={(event) => {
+				if (event.key === 'Enter') {
+					event.preventDefault();
+					void addStream(input);
+				}
+			}}
+		/>
+		<Button disabled={busy || !input.trim()} onclick={() => addStream(input)}
+			>{replacing ? 'Replace stream' : 'Add stream'}</Button
+		>
+	</div>
+	{#if replacing}<p class="mt-3 text-sm text-muted">
+			This replaces the current Streamplace link.
+		</p>{/if}
+	{#if error}<p class="mt-3 text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>{/if}
+</Modal>

package/dist/components/StreamplacePicker.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { StreamplaceSelection } from '../streamplace.js';
+export type StreamplacePickerProps = {
+    open?: boolean;
+    actor?: string | null;
+    replacing?: boolean;
+    resolveHandle: (handle: string) => Promise<string>;
+    onselect: StreamplaceSelection;
+    class?: string;
+};
+declare const StreamplacePicker: import("svelte").Component<StreamplacePickerProps, {}, "open">;
+type StreamplacePicker = ReturnType<typeof StreamplacePicker>;
+export default StreamplacePicker;