@atmo-dev/kit 0.3.0 → 0.4.0

package/README.md

@@ -9,6 +9,35 @@ Svelte 5 and Tailwind CSS 4 components for Atmo apps.
 - Releases: `pnpm changeset`, then merge the generated release PR. [Details](.changeset/README.md).
 - License: [MIT](LICENSE).
 
+## Photos, Grain albums and Streamplace
+
+`PhotoGrid` and `PhotoLightbox` work with provider-neutral `Photo[]` data (`src`, optional `thumbnail`, `alt`, dimensions and `contentWarning`). The grid preserves natural image proportions in responsive masonry columns, with a subtle 2% hover zoom disabled for reduced motion. It gates warned images before mounting them and opens a borderless fullscreen viewer. The viewer has a dimmed backdrop, previous/next arrows, close and a small photo-position counter; native horizontal scrolling with CSS scroll snap makes photos follow your finger or trackpad, with inertia rather than switching only on release. Mouse/pen drags also move the track directly. Swipes loop like the arrows; vertical pans do not navigate and controls are separate from the drag surface. Native pinch zoom, arrow keys, Escape, focus trapping and restoration are preserved; release animations respect reduced motion. `PhotoLightbox` also works independently with `bind:open` and `bind:index`; callers using it directly must first filter or reveal any warned photos. Apps own URL validation and moderation policy.
+
+`GrainAlbumPicker`, `GrainAlbumView` and `StreamplacePicker` take explicit callbacks. They own presentation, pending/error states and stale-read protection—not sessions, event records, persistence, routes or caching. Picker selection callbacks can return a user-facing error string to keep the dialog open. See the offline examples at `/components`.
+
+```svelte
+<GrainAlbumPicker
+	bind:open
+	actor={viewer.did}
+	listAlbums={photos.listAlbums}
+	loadAlbum={photos.getGallery}
+	onselect={(album) => attachAlbum(album)}
+/>
+<GrainAlbumView reference={albumUri} loadAlbum={photos.getGallery} />
+<StreamplacePicker
+	bind:open={streamOpen}
+	actor={viewer.handle}
+	{resolveHandle}
+	onselect={(stream) => attachStream(stream.url)}
+/>
+```
+
+`photos` implements the framework-free `GrainClient` contract from `@atmo-dev/kit/grain`: `getGallery(reference)` and `listAlbums(actor, cursor?)`, returning normalized `GrainGallery`/`GrainAlbumPage` data. The UI does **not** select a backend or fetch a default app route. An atmo.pics/Contrail implementation can replace the provider later without changing the pickers, gallery or lightbox.
+
+For now, `createGrainXrpcClient(fetchImpl?)` provides the Grain.social implementation: its fixed public `social.grain.unspecced.getGallery` and `dev.hatk.getFeed` endpoints, response normalization, CDN validation, content-warning flags, five-second timeouts and no redirects. It performs no IO until a method is called. Apps choose where it runs and own any proxy endpoint, cache, authentication or additional moderation. No arbitrary-origin proxy option is exposed.
+
+`parseGrainLink` is exported from `@atmo-dev/kit/grain`, `parseStreamplaceLink` from `@atmo-dev/kit/streamplace`, and `Photo` from `@atmo-dev/kit/media`. The main entry point exports these too. Grain URLs normalize to DID-based links after loading; handles and percent-encoded DID identifiers are accepted. These helpers validate syntax only, not account existence.
+
 ## Read-only profiles
 
 `UserProfile` displays a Bluesky profile header: banner, avatar, name, handle, pronouns, optional counts, bio, modern profile links, and a DID-based “View on Bluesky” link. It has no editing or follow behavior. An optional `actions` snippet holds app-owned controls. `metrics={[{ label: 'events created', value: 12 }]}` replaces the default Bluesky counts; `metrics={[]}` hides all counts.
@@ -29,6 +58,35 @@ Svelte 5 and Tailwind CSS 4 components for Atmo apps.
 
 `blueskyProfileToProfileData` accepts an `app.bsky.actor.getProfile` view and validates optional fields. Its `links` must be hydrated `app.bsky.actor.link` views (`url`, optional `title` and `icon` image URL), not the profile record's ordered strongRefs. It omits unresolved refs and labeled links conservatively, deduplicates destinations, and displays at most ten. The legacy `website` field is deliberately ignored. Apps own hydration, account moderation and any more specific link-moderation policy. Supplied icons render as small decorative images; unsafe or failed icons fall back to text-only links. No link metadata or destination is fetched by the component.
 
+## Bluesky comments and embeds
+
+`NestedComments` renders `PostData[]` with recursive replies and compact reply, repost, and like icon/count links. Counts default to zero; each link has a full accessible label and opens the post in the viewer's preferred social client. These are outbound links, not authenticated engagement buttons.
+
+Use `blueskyPostToPostData(postView)` to convert public AppView posts, including `repostCount`. `PostContent` supports images, galleries, external link cards, HLS video, quoted posts (including their embeds), record-with-media combinations, feeds, lists, starter packs, and moderation-service cards. Missing, blocked, and detached quotes have readable placeholders; unknown embed variants show an unavailable fallback. Quote nesting is capped at three levels. Non-post record cards use Bluesky routes, since other clients may not implement them. Apps still own fetching and moderation.
+
+### Special link embeds
+
+External links use an ordered provider registry. YouTube watch, short, live, embed, and `youtu.be` links get a click-to-load, privacy-enhanced player. No YouTube iframe or SDK is loaded before activation; the preview uses only the supplied AppView thumbnail. Klipy's `static.klipy.com/ii/...` media links render GIFs or looping, muted video using Bluesky's media proxy, preserving the GIF description as alt text. Klipy media autoplays and loops without native video controls or a caption row. A small corner-overlay pause/play button controls the animation; pausing video preserves its current frame. With reduced motion enabled, it stays on the preview until explicitly played. Ordinary Klipy page links without a usable media URL remain link cards; no metadata API or API key is needed. Unknown URLs and playback failures fall back to the original link card.
+
+Pass `embedProviders` to `PostContent` or `NestedComments` (it propagates to all replies and quotes). Omit it for YouTube + Klipy, or pass `[]` to disable special players. Add providers without modifying the renderer:
+
+```ts
+import { defaultExternalEmbedProviders, type ExternalEmbedProvider } from '@atmo-dev/kit/social';
+
+const exampleProvider: ExternalEmbedProvider = {
+	id: 'example',
+	label: 'Example',
+	resolve(url) {
+		if (url.hostname !== 'example.com') return null;
+		const id = /^\/watch\/([a-zA-Z0-9_-]+)$/.exec(url.pathname)?.[1];
+		return id ? { type: 'iframe', src: `https://player.example.com/embed/${id}` } : null;
+	}
+};
+const embedProviders = [exampleProvider, ...defaultExternalEmbedProviders];
+```
+
+Providers are trusted app-owned, synchronous URL resolvers returning `iframe`, `video` (typed sources), or `image` descriptors—not HTML. Match exact hosts, validate IDs, and construct known player URLs. Media descriptors can set `autoplay: true` and videos can set `controls: false` for GIF-like playback; iframe players always require a click. The shared `ExternalEmbed` renderer owns playback policy, reduced-motion handling, sandboxed iframes, safe URL schemes, pause controls, source-change resets, and fallback cards. It is also exported for standalone use.
+
 ## Preferred social client
 
 `SocialClientPicker` is a native form field group for Bluesky, mu, Blacksky, Witchsky, or a custom web client. Pass the viewer's saved `value` (a `PreferredSocialClient`, or `null` for Bluesky) and optionally `disabled`. It submits `client` and, for custom clients, `customUrl`. The app owns the form, save button, authentication, and feedback.
@@ -48,7 +106,7 @@ Framework-free helpers are exported from `@atmo-dev/kit/social` (and the main en
 - `preferredSocialClientRecord(selection)` builds a validated record. Never write merely because a read failed; distinguish `RecordNotFound` from PDS/network failures, and use `swapRecord` to guard updates.
 - `socialClientInfo(selection)`, `socialProfileUrl(actor, selection)`, `socialPostUrl(atUri, selection)`, and `socialHashtagUrl(tag, selection)` default to Bluesky. `socialPostUrl` accepts feed-post AT URIs and returns `null` for invalid ones. Custom URLs must be absolute HTTP(S), without credentials, query or fragment, and support `/profile/:actor` routes. Base paths are preserved.
 
-Read the signed-in viewer's record from their PDS, include the parsed selection in viewer data, and pass it to `<UserProfile {profile} socialClient={viewer.preferredSocialClient} />`. The profile's external button and handle link use that client. Pass the same `socialClient` prop to `NestedComments` for author, reply and like links, including nested replies. Changing the selection updates these links without changing the stored post data. Bio hashtags also use the selected client. Supply an app-owned `mentionUrl` callback to `UserProfile` (for example, `(actor) => '/p/' + encodeURIComponent(actor)`) to route bio mentions locally in the same tab; without it they open the selected social client. Post-content facets retain their existing Bluesky links. Apps remain responsible for server-side authorization, IO, incremental authorization when access is missing, and invalidating viewer data after saves.
+Read the signed-in viewer's record from their PDS, include the parsed selection in viewer data, and pass it to `<UserProfile {profile} socialClient={viewer.preferredSocialClient} />`. The profile's external button and handle link use that client. Pass the same `socialClient` prop to `NestedComments` for author, reply, repost, like, and quoted-post links, including nested replies. Changing the selection updates these links without changing the stored post data. Bio hashtags also use the selected client. Supply an app-owned `mentionUrl` callback to `UserProfile` (for example, `(actor) => '/p/' + encodeURIComponent(actor)`) to route bio mentions locally in the same tab; without it they open the selected social client. Post-content facets retain their existing Bluesky links. Apps remain responsible for server-side authorization, IO, incremental authorization when access is missing, and invalidating viewer data after saves.
 
 ## Login identifiers
 

package/dist/components/ExternalEmbed.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { Pause, Play } from '@sketchyicons/svelte';
+	import {
+		resolveExternalEmbed,
+		type ExternalEmbedProvider,
+		type ExternalPostEmbed
+	} from '../social/external-embeds.js';
+	import { safeWebUrl } from '../social/richtext.js';
+	import { focus } from '../styles.js';
+	import Icon from './Icon.svelte';
+	import LinkCard from './LinkCard.svelte';
+
+	let {
+		embed,
+		providers
+	}: {
+		embed: ExternalPostEmbed;
+		providers?: readonly ExternalEmbedProvider[];
+	} = $props();
+	let match = $derived(resolveExternalEmbed(embed, providers));
+	// Consent belongs to this resolved player, not to its position in the feed.
+	// A changed URL/provider/source never inherits an earlier click, even for one render.
+	let activated = $state.raw<typeof match>(null);
+	let failed = $state.raw<typeof match>(null);
+	let paused = $state.raw<typeof match>(null);
+	// Wait for the browser preference before mounting autoplaying media, including GIF images.
+	let reducedMotion = $state(true);
+	onMount(() => {
+		const preference = window.matchMedia('(prefers-reduced-motion: reduce)');
+		const update = () => (reducedMotion = preference.matches);
+		update();
+		preference.addEventListener('change', update);
+		return () => preference.removeEventListener('change', update);
+	});
+	let autoplay = $derived(match?.player.type !== 'iframe' && match?.player.autoplay === true);
+	let active = $derived(
+		match !== null && (activated === match || (autoplay && !reducedMotion && paused !== match))
+	);
+	let label = $derived(embed.title || `${match?.provider.label ?? 'External'} media`);
+	let previewButton = $state<HTMLButtonElement | null>(null);
+	let stopButton = $state<HTMLButtonElement | null>(null);
+	let animationButton = $state<HTMLButtonElement | null>(null);
+	let video = $state<HTMLVideoElement | null>(null);
+	$effect(() => {
+		if (!video) return;
+		if (active) void video.play().catch(() => {});
+		else video.pause();
+	});
+	async function play() {
+		paused = null;
+		activated = match;
+		await tick();
+		(autoplay ? animationButton : stopButton)?.focus({ preventScroll: true });
+	}
+	async function stop() {
+		paused = match;
+		activated = null;
+		await tick();
+		(autoplay ? animationButton : previewButton)?.focus({ preventScroll: true });
+	}
+</script>
+
+{#if match && failed !== match}
+	<div class="relative overflow-hidden rounded-ui border border-line">
+		{#if active || (autoplay && match.player.type === 'video' && paused === match)}
+			{#if match.player.type === 'iframe'}
+				<iframe
+					src={safeWebUrl(match.player.src)}
+					title={label}
+					allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
+					allowfullscreen
+					sandbox="allow-scripts allow-same-origin allow-presentation"
+					referrerpolicy="strict-origin-when-cross-origin"
+					class="max-h-[32rem] w-full border-0 bg-black"
+					style:aspect-ratio={match.player.aspectRatio ?? 16 / 9}
+					onerror={() => (failed = match)}
+				></iframe>
+			{:else if match.player.type === 'video'}
+				<!-- Klipy GIF videos have no audio or captions; the original description is the label. -->
+				{#key match}<video
+						bind:this={video}
+						aria-label={embed.description?.replace(/^Alt: /i, '') || label}
+						poster={safeWebUrl(embed.image)}
+						controls={match.player.controls ?? true}
+						autoplay
+						muted
+						loop
+						playsinline
+						class="max-h-[32rem] w-full bg-black object-contain"
+						style:aspect-ratio={match.player.aspectRatio ?? 16 / 9}
+						onerror={() => (failed = match)}
+					>
+						{#each match.player.sources as source (source.src)}
+							<source src={safeWebUrl(source.src)} type={source.type} />
+						{/each}
+					</video>{/key}
+			{:else}
+				<img
+					src={safeWebUrl(match.player.src)}
+					alt={embed.description?.replace(/^Alt: /i, '') || label}
+					class="max-h-[32rem] w-full object-contain"
+					onerror={() => (failed = match)}
+				/>
+			{/if}
+		{:else if autoplay}
+			<div
+				class="relative max-h-[32rem] w-full bg-surface"
+				style:aspect-ratio={match.player.aspectRatio ?? 16 / 9}
+			>
+				{#if safeWebUrl(embed.image)}<img
+						src={safeWebUrl(embed.image)}
+						alt=""
+						loading="lazy"
+						class="absolute inset-0 size-full object-cover"
+					/>{/if}
+			</div>
+		{:else}
+			<button
+				bind:this={previewButton}
+				type="button"
+				aria-label={`Play ${label} on ${match.provider.label}`}
+				onclick={play}
+				class={`relative flex max-h-[32rem] w-full items-center justify-center overflow-hidden bg-surface text-ink ${focus}`}
+				style:aspect-ratio={match.player.aspectRatio ?? 16 / 9}
+			>
+				{#if safeWebUrl(embed.image)}<img
+						src={safeWebUrl(embed.image)}
+						alt=""
+						loading="lazy"
+						class="absolute inset-0 size-full object-cover"
+					/>{/if}
+				<span
+					class="relative inline-flex items-center gap-2 rounded-full border border-line bg-surface px-4 py-2 text-sm font-medium"
+				>
+					<Icon img={Play} size={18} />Play · {match.provider.label}
+				</span>
+			</button>
+		{/if}
+		{#if autoplay}
+			<button
+				bind:this={animationButton}
+				type="button"
+				onclick={active ? stop : play}
+				aria-label={active
+					? `Pause ${match.provider.label} animation`
+					: `Play ${label} on ${match.provider.label}`}
+				class={`absolute right-2 bottom-2 inline-flex size-8 items-center justify-center rounded-full bg-black/60 text-white transition-colors hover:bg-black/80 ${focus}`}
+				><Icon img={active ? Pause : Play} size={16} /></button
+			>
+		{:else}
+			<div class="flex items-center justify-between gap-3 p-3 text-xs">
+				<a
+					href={safeWebUrl(embed.uri)}
+					target="_blank"
+					rel="noopener noreferrer"
+					class={`min-w-0 truncate rounded-ui text-muted hover:text-action ${focus}`}
+					>{embed.title || `Open on ${match.provider.label}`}</a
+				>
+				{#if active}<button
+						type="button"
+						bind:this={stopButton}
+						onclick={stop}
+						aria-label={`Stop ${match.provider.label} embed`}
+						class={`shrink-0 rounded-ui text-muted hover:text-action ${focus}`}>Stop</button
+					>{/if}
+			</div>{/if}
+	</div>
+{:else}
+	<LinkCard
+		href={embed.uri}
+		meta={{ title: embed.title, description: embed.description, image: embed.image }}
+	/>
+{/if}

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

@@ -0,0 +1,8 @@
+import { type ExternalEmbedProvider, type ExternalPostEmbed } from '../social/external-embeds.js';
+type $$ComponentProps = {
+    embed: ExternalPostEmbed;
+    providers?: readonly ExternalEmbedProvider[];
+};
+declare const ExternalEmbed: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExternalEmbed = ReturnType<typeof ExternalEmbed>;
+export default ExternalEmbed;

package/dist/components/GrainAlbumPicker.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { Camera } from '@sketchyicons/svelte';
+	import Button from './Button.svelte';
+	import Icon from './Icon.svelte';
+	import Input from './Input.svelte';
+	import Modal from './Modal.svelte';
+	import { parseGrainLink } from '../grain/urls.js';
+	import type { GrainAlbum, GrainClient, GrainGallery, GrainSelection } from '../grain/types.js';
+
+	export type GrainAlbumPickerProps = {
+		open?: boolean;
+		actor?: string | null;
+		listAlbums?: GrainClient['listAlbums'];
+		loadAlbum?: GrainClient['getGallery'];
+		selectedUris?: string[];
+		isSelected?: (album: GrainAlbum) => boolean;
+		onselect: GrainSelection;
+		class?: string;
+	};
+	let {
+		open = $bindable(false),
+		actor,
+		listAlbums,
+		loadAlbum,
+		selectedUris = [],
+		isSelected,
+		onselect,
+		class: className
+	}: GrainAlbumPickerProps = $props();
+	let input = $state('');
+	let error = $state('');
+	let listError = $state('');
+	let busy = $state(false);
+	let listing = $state(false);
+	let albums: GrainAlbum[] = $state([]);
+	let cursor = $state<string | undefined>();
+	let preview: GrainGallery | null = $state(null);
+	let previewInput = $state('');
+	let generation = 0;
+	function added(album: GrainAlbum) {
+		return selectedUris.includes(album.uri) || !!isSelected?.(album);
+	}
+
+	$effect(() => {
+		void actor;
+		void listAlbums;
+		void loadAlbum;
+		const shown = open;
+		generation++;
+		input = '';
+		error = '';
+		listError = '';
+		busy = false;
+		listing = false;
+		albums = [];
+		cursor = undefined;
+		preview = null;
+		if (shown)
+			untrack(() => {
+				void loadPage();
+			});
+		return () => {
+			generation++;
+		};
+	});
+	async function choose(album: GrainAlbum) {
+		if (busy || added(album)) return;
+		const id = generation;
+		busy = true;
+		error = '';
+		try {
+			const message = await onselect(album);
+			if (id !== generation) return;
+			if (message) error = message;
+			else open = false;
+		} catch {
+			if (id === generation) error = 'Couldn’t add that album. Please try again.';
+		} finally {
+			if (id === generation) busy = false;
+		}
+	}
+	async function loadPage(more = false) {
+		if (!actor || !listAlbums || listing) return;
+		const id = generation;
+		const previous = more ? cursor : undefined;
+		listing = true;
+		listError = '';
+		try {
+			const page = await listAlbums(actor, previous);
+			if (id !== generation) return;
+			albums = [
+				...new Map(
+					(more ? [...albums, ...page.albums] : page.albums).map((album) => [album.uri, album])
+				).values()
+			];
+			cursor = page.cursor !== previous ? page.cursor : undefined;
+		} catch {
+			if (id === generation) listError = 'Couldn’t load your albums. You can still paste a link.';
+		} finally {
+			if (id === generation) listing = false;
+		}
+	}
+	async function previewAlbum() {
+		if (busy) return;
+		const ref = parseGrainLink(input);
+		if (!ref) {
+			error = 'Enter a Grain gallery URL.';
+			return;
+		}
+		if (!loadAlbum) {
+			error = 'Album previews aren’t available in this app.';
+			return;
+		}
+		const id = generation,
+			requested = input;
+		busy = true;
+		error = '';
+		preview = null;
+		try {
+			const result = await loadAlbum(ref.atUri);
+			if (id === generation && input === requested) {
+				preview = result;
+				previewInput = requested;
+			}
+		} catch {
+			if (id === generation) error = 'Couldn’t load that album. Check the link and try again.';
+		} finally {
+			if (id === generation) busy = false;
+		}
+	}
+</script>
+
+<Modal bind:open title="Add photo album" class={className}>
+	<div class="flex flex-col gap-2 sm:flex-row">
+		<Input
+			aria-label="Grain album link"
+			placeholder="Paste a Grain album link…"
+			bind:value={input}
+			class="min-w-0 flex-1"
+			oninput={() => {
+				preview = null;
+				error = '';
+			}}
+			onkeydown={(event) => {
+				if (event.key === 'Enter') {
+					event.preventDefault();
+					void previewAlbum();
+				}
+			}}
+		/>
+		<Button disabled={busy || !input.trim()} onclick={previewAlbum}
+			>{busy ? 'Loading…' : 'Preview'}</Button
+		>
+	</div>
+	{#if preview && input === previewInput}
+		<div class="mt-4 flex items-center gap-3">
+			{#if preview.cover && !preview.contentWarning}<img
+					src={preview.cover}
+					alt=""
+					class="size-16 rounded-lg object-cover"
+				/>{/if}
+			<div class="min-w-0 flex-1">
+				<p class="truncate font-medium">{preview.title}</p>
+				<p class="text-sm break-words text-muted">
+					@{preview.creator.handle} · {preview.photoCount} photos
+				</p>
+				{#if preview.contentWarning}<p class="text-xs text-muted">Content warning</p>{/if}
+			</div>
+			<Button disabled={busy || added(preview)} onclick={() => preview && choose(preview)}
+				>{added(preview) ? 'Added' : 'Add album'}</Button
+			>
+		</div>
+	{/if}
+	{#if actor && listAlbums}
+		<p class="mt-6 mb-2 text-sm font-medium">Your albums</p>
+		<div class="space-y-1">
+			{#each albums as album (album.uri)}
+				<button
+					type="button"
+					class="flex w-full items-center gap-3 rounded-lg p-2 text-left hover:bg-recess disabled:opacity-50"
+					disabled={busy || added(album)}
+					onclick={() => choose(album)}
+					aria-label={`${added(album) ? 'Added' : 'Add'} ${album.title}`}
+				>
+					{#if album.cover && !album.contentWarning}<img
+							src={album.cover}
+							alt=""
+							loading="lazy"
+							class="size-14 shrink-0 rounded-md object-cover"
+						/>{:else}<span
+							class="flex size-14 shrink-0 items-center justify-center rounded-md bg-recess"
+							><Icon img={Camera} size={20} /></span
+						>{/if}
+					<span class="min-w-0 flex-1"
+						><span class="block truncate font-medium">{album.title}</span><span
+							class="text-sm text-muted"
+							>{album.photoCount} photos{album.contentWarning ? ' · Content warning' : ''}</span
+						></span
+					>
+					{#if added(album)}<span class="text-xs text-muted">Added</span>{/if}
+				</button>
+			{/each}
+		</div>
+		{#if listing}<p class="mt-3 text-sm text-muted" role="status">
+				Loading albums…
+			</p>{:else if listError}<p class="mt-3 text-sm text-muted" role="status">{listError}</p>
+			<Button variant="ghost" size="sm" onclick={() => loadPage(!!cursor)}>Try again</Button
+			>{:else if !albums.length}<p class="text-sm text-muted">No albums yet.</p>{/if}
+		{#if cursor && !listError}<Button
+				variant="ghost"
+				class="mt-3"
+				disabled={listing}
+				onclick={() => loadPage(true)}>Load more</Button
+			>{/if}
+	{/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/GrainAlbumPicker.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { GrainAlbum, GrainClient, GrainSelection } from '../grain/types.js';
+export type GrainAlbumPickerProps = {
+    open?: boolean;
+    actor?: string | null;
+    listAlbums?: GrainClient['listAlbums'];
+    loadAlbum?: GrainClient['getGallery'];
+    selectedUris?: string[];
+    isSelected?: (album: GrainAlbum) => boolean;
+    onselect: GrainSelection;
+    class?: string;
+};
+declare const GrainAlbumPicker: import("svelte").Component<GrainAlbumPickerProps, {}, "open">;
+type GrainAlbumPicker = ReturnType<typeof GrainAlbumPicker>;
+export default GrainAlbumPicker;

package/dist/components/GrainAlbumView.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import PhotoGrid from './PhotoGrid.svelte';
+	import { parseGrainLink } from '../grain/urls.js';
+	import type { GrainClient, GrainGallery } from '../grain/types.js';
+	import type { Photo } from '../media.js';
+	import { cn } from '../utils.js';
+
+	export type GrainAlbumViewProps = {
+		reference: string;
+		title?: string;
+		loadAlbum?: GrainClient['getGallery'];
+		class?: string;
+	};
+	let { reference, title, loadAlbum, class: className }: GrainAlbumViewProps = $props();
+	let ref = $derived(parseGrainLink(reference));
+	let gallery: GrainGallery | null = $state(null);
+	let loading = $state(false);
+	let failed = $state(false);
+	let retry = $state(0);
+	let revealed = $state(false);
+	let photos: Photo[] = $derived.by(
+		() =>
+			gallery?.photos.map((photo) => ({
+				id: photo.uri,
+				src: photo.fullsize,
+				thumbnail: photo.thumb,
+				alt: photo.alt,
+				width: photo.width,
+				height: photo.height,
+				contentWarning: photo.contentWarning
+			})) ?? []
+	);
+	$effect(() => {
+		const input = parseGrainLink(reference)?.atUri ?? reference;
+		const transport = loadAlbum;
+		void retry;
+		let current = true;
+		gallery = null;
+		failed = false;
+		revealed = false;
+		loading = !!transport;
+		if (transport) {
+			void Promise.resolve()
+				.then(() => transport(input))
+				.then((result) => {
+					if (current) gallery = result;
+				})
+				.catch(() => {
+					if (current) failed = true;
+				})
+				.finally(() => {
+					if (current) loading = false;
+				});
+		}
+		return () => {
+			current = false;
+		};
+	});
+</script>
+
+<section aria-label={gallery?.title || title || 'Photo album'} class={cn(className)}>
+	<div class="mb-3 flex flex-wrap items-start justify-between gap-2">
+		<div class="min-w-0">
+			<h2 class="font-medium break-words">{gallery?.title || title || 'Photo album'}</h2>
+			{#if gallery}<a
+					href={`https://grain.social/profile/${encodeURIComponent(gallery.creator.did)}`}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-sm break-all text-muted hover:text-action"
+					>{gallery.creator.displayName || gallery.creator.handle} · @{gallery.creator.handle}</a
+				>{/if}
+		</div>
+		{#if gallery?.url || ref?.url}<a
+				href={gallery?.url || ref?.url}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-sm text-action hover:underline">Open on Grain</a
+			>{/if}
+	</div>
+	{#if loading}<p class="py-6 text-sm text-muted" role="status">Loading photos…</p>
+	{:else if failed || !loadAlbum}<p class="mb-2 text-sm text-muted" role="status">
+			Photos are unavailable. You can still open the album on Grain.
+		</p>
+		{#if loadAlbum}<Button variant="ghost" size="sm" onclick={() => retry++}>Try again</Button>{/if}
+	{:else if gallery}
+		{#if gallery.contentWarning && !revealed}<div class="rounded-lg border border-line p-4">
+				<p class="mb-3 text-sm">This album has a content warning.</p>
+				<Button variant="secondary" size="sm" onclick={() => (revealed = true)}>Show photos</Button>
+			</div>
+		{:else if !photos.length}<p class="py-4 text-sm text-muted">No photos in this album yet.</p>
+		{:else}<PhotoGrid {photos} label={gallery.title} />{/if}
+	{/if}
+</section>

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

@@ -0,0 +1,10 @@
+import type { GrainClient } from '../grain/types.js';
+export type GrainAlbumViewProps = {
+    reference: string;
+    title?: string;
+    loadAlbum?: GrainClient['getGallery'];
+    class?: string;
+};
+declare const GrainAlbumView: import("svelte").Component<GrainAlbumViewProps, {}, "">;
+type GrainAlbumView = ReturnType<typeof GrainAlbumView>;
+export default GrainAlbumView;

package/dist/components/NestedComments.svelte

@@ -1,17 +1,23 @@
 <script lang="ts">
 	import type { PostData } from '../social/posts.js';
+	import type { ExternalEmbedProvider } from '../social/external-embeds.js';
 	import { safeWebUrl } from '../social/richtext.js';
 	import { socialPostUrl, socialProfileUrl } from '../social/urls.js';
 	import type { PreferredSocialClient } from '../social/preferred-client.js';
+	import { Heart, MessageCircle, Repeat2 } from '@sketchyicons/svelte';
+	import { focus } from '../styles.js';
+	import Icon from './Icon.svelte';
 	import Avatar from './Avatar.svelte';
 	import PostContent from './PostContent.svelte';
 	import NestedComments from './NestedComments.svelte';
 	let {
 		comments,
-		socialClient
+		socialClient,
+		embedProviders
 	}: {
 		comments: PostData[];
 		socialClient?: PreferredSocialClient | null;
+		embedProviders?: readonly ExternalEmbedProvider[];
 	} = $props();
 </script>
 
@@ -44,19 +50,23 @@
 								})}</time
 							>{/if}
 					</div>
-					<PostContent post={comment} />
-					<div class="mt-2 flex gap-5 text-[.6875rem] text-muted">
-						<a {href} target="_blank" rel="noopener noreferrer" class="hover:text-action"
-							>Reply{#if comment.replyCount}
-								· {comment.replyCount}{/if}</a
-						><a {href} target="_blank" rel="noopener noreferrer" class="hover:text-action"
-							>{comment.likeCount ?? 0} likes</a
-						>
+					<PostContent post={comment} {socialClient} {embedProviders} />
+					<div class="mt-1 flex items-center gap-5 text-xs text-muted">
+						{#each [{ icon: MessageCircle, count: comment.replyCount ?? 0, singular: 'reply', plural: 'replies' }, { icon: Repeat2, count: comment.repostCount ?? 0, singular: 'repost', plural: 'reposts' }, { icon: Heart, count: comment.likeCount ?? 0, singular: 'like', plural: 'likes' }] as action (action.singular)}
+							<a
+								{href}
+								target="_blank"
+								rel="noopener noreferrer"
+								aria-label={`${action.count} ${action.count === 1 ? action.singular : action.plural}`}
+								class={`inline-flex min-h-8 items-center gap-1.5 rounded-ui tabular-nums transition-colors hover:text-action ${focus}`}
+								><Icon img={action.icon} size={16} /><span>{action.count}</span></a
+							>
+						{/each}
 					</div>
 				</div>
 			</div>
 			{#if comment.replies?.length}<div class="mt-4 border-l border-line pl-3 sm:ml-4 sm:pl-6">
-					<NestedComments comments={comment.replies} {socialClient} />
+					<NestedComments comments={comment.replies} {socialClient} {embedProviders} />
 				</div>{/if}
 		</article>
 	{/each}