@atmo-dev/kit 0.2.1 → 0.4.0

package/dist/components/SocialClientPicker.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import type { PreferredSocialClient } from '../social/preferred-client.js';
+	export type SocialClientPickerProps = {
+		value?: PreferredSocialClient | null;
+		disabled?: boolean;
+	};
+</script>
+
+<script lang="ts">
+	import { socialClients } from '../social/preferred-client.js';
+	import Select from './Select.svelte';
+	import Input from './Input.svelte';
+	import Label from './Label.svelte';
+
+	let { value = null, disabled = false }: SocialClientPickerProps = $props();
+	const id = $props.id();
+	let client: string = $derived(value?.client ?? 'bluesky');
+	let customUrl = $derived(value?.client === 'custom' ? value.customUrl : '');
+</script>
+
+<div class="grid gap-4">
+	<div class="grid gap-2">
+		<Label for={`${id}-client`}>Preferred social app</Label>
+		<Select id={`${id}-client`} name="client" bind:value={client} {disabled}>
+			{#each socialClients as option (option.id)}
+				<option value={option.id}>{option.label}</option>
+			{/each}
+			<option value="custom">Custom</option>
+		</Select>
+	</div>
+	{#if client === 'custom'}
+		<div class="grid gap-2">
+			<Label for={`${id}-url`}>Client URL</Label>
+			<Input
+				id={`${id}-url`}
+				name="customUrl"
+				type="url"
+				bind:value={customUrl}
+				{disabled}
+				required
+				maxlength={2048}
+				placeholder="https://your-client.example"
+				aria-describedby={`${id}-hint`}
+			/>
+			<p id={`${id}-hint`} class="text-sm text-muted">
+				Use a web client with Bluesky-style profile links.
+			</p>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,8 @@
+import type { PreferredSocialClient } from '../social/preferred-client.js';
+export type SocialClientPickerProps = {
+    value?: PreferredSocialClient | null;
+    disabled?: boolean;
+};
+declare const SocialClientPicker: import("svelte").Component<SocialClientPickerProps, {}, "">;
+type SocialClientPicker = ReturnType<typeof SocialClientPicker>;
+export default SocialClientPicker;

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;

package/dist/components/UserProfile.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../utils.js';
+	import {
+		profileDescriptionSegments,
+		safeProfileUrl,
+		visibleProfileLinks,
+		type ProfileData
+	} from '../social/profile.js';
+	import { socialProfileUrl } from '../social/urls.js';
+	import { socialClientInfo, type PreferredSocialClient } from '../social/preferred-client.js';
+	import Avatar from './Avatar.svelte';
+	import Button from './Button.svelte';
+
+	export type UserProfileProps = {
+		profile: ProfileData;
+		/** The viewer's choice, not the profile owner's. Defaults to Bluesky. */
+		socialClient?: PreferredSocialClient | null;
+		/** Route bio mentions to an app-owned profile instead of the social client. */
+		mentionUrl?: (identifier: string) => string;
+		actions?: Snippet;
+		/** App-owned metrics replace the default Bluesky counts, including an empty array. */
+		metrics?: { label: string; value: number }[];
+		class?: string;
+	};
+	let {
+		profile,
+		socialClient,
+		mentionUrl,
+		actions,
+		metrics,
+		class: className
+	}: UserProfileProps = $props();
+	let displayedMetrics = $derived(
+		metrics ??
+			[
+				{ value: profile.followersCount, label: 'followers' },
+				{ value: profile.followsCount, label: 'following' },
+				{ value: profile.postsCount, label: 'posts' }
+			].filter((metric) => metric.value !== undefined)
+	);
+	let name = $derived(profile.displayName || profile.handle || profile.did);
+	let href = $derived(socialProfileUrl(profile.did, socialClient));
+	let clientLabel = $derived(socialClientInfo(socialClient).label);
+	let failedBanner = $state<string>();
+	let bannerSrc = $derived(safeProfileUrl(profile.banner));
+	let banner = $derived(bannerSrc !== failedBanner ? bannerSrc : undefined);
+	let links = $derived(visibleProfileLinks(profile.links));
+	let failedLinkIcons = $state<Record<string, string>>({});
+	let pronouns = $derived(profile.pronouns?.trim().toLowerCase());
+</script>
+
+<section class={cn('min-w-0 text-ink', className)} aria-label="Profile">
+	{#if banner}
+		<div
+			data-slot="profile-banner"
+			class="relative aspect-3/1 w-full overflow-hidden rounded-panel bg-recess"
+		>
+			<img
+				src={banner}
+				alt=""
+				width="1500"
+				height="500"
+				class="absolute inset-0 size-full object-cover"
+				loading="eager"
+				fetchpriority="high"
+				decoding="async"
+				referrerpolicy="no-referrer"
+				onerror={(event) => (failedBanner = event.currentTarget.getAttribute('src') ?? undefined)}
+			/>
+		</div>
+	{/if}
+	<div class={cn('flex flex-wrap items-start justify-between gap-4', banner ? 'px-4' : '')}>
+		<Avatar
+			{name}
+			src={safeProfileUrl(profile.avatar)}
+			size={96}
+			class={cn('relative size-20 sm:size-24', banner && '-mt-10 ring-4 ring-page sm:-mt-12')}
+		/>
+		<div class={cn('flex flex-wrap items-center gap-2', banner && 'pt-3')}>
+			<Button {href} target="_blank" rel="noopener noreferrer" variant="secondary" size="sm">
+				View on {clientLabel}
+			</Button>
+			{@render actions?.()}
+		</div>
+	</div>
+	<div class="mt-4 min-w-0">
+		<h1 class="text-2xl font-semibold tracking-tight wrap-anywhere sm:text-3xl">
+			<bdi>{name}</bdi>
+		</h1>
+		<div class="mt-1 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-muted">
+			{#if profile.handle}<a
+					{href}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="min-w-0 wrap-anywhere hover:underline"><bdi>@{profile.handle}</bdi></a
+				>{/if}
+			{#if pronouns}<span aria-label="Pronouns"><bdi>{pronouns}</bdi></span>{/if}
+		</div>
+	</div>
+	{#if displayedMetrics.length}
+		<dl aria-label="Profile statistics" class="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-sm">
+			{#each displayedMetrics as metric (metric.label)}
+				{#if metric.value !== undefined}<div class="flex gap-1">
+						<dd class="font-semibold">{metric.value.toLocaleString('en')}</dd>
+						<dt class="text-muted">{metric.label}</dt>
+					</div>{/if}
+			{/each}
+		</dl>
+	{/if}
+	{#if profile.description}
+		<p class="mt-4 text-sm leading-relaxed wrap-anywhere whitespace-pre-wrap">
+			{#each profileDescriptionSegments( profile.description, { socialClient, mentionUrl } ) as segment, index (index)}{#if segment.href}<a
+						href={segment.href}
+						target={segment.href.startsWith('/') ? undefined : '_blank'}
+						rel={segment.href.startsWith('/') ? undefined : 'noopener noreferrer nofollow ugc'}
+						class="text-action underline decoration-action/40 underline-offset-2 hover:decoration-action"
+						>{segment.text}</a
+					>{:else}{segment.text}{/if}{/each}
+		</p>
+	{/if}
+	{#if links.length}
+		<ul aria-label="Profile links" class="mt-4 flex flex-wrap gap-2">
+			{#each links as link (link.url)}
+				<li class="max-w-full min-w-0">
+					<a
+						href={link.url}
+						target="_blank"
+						rel="noopener noreferrer nofollow ugc"
+						class="inline-flex max-w-full items-center gap-2 rounded-ui border border-line px-3 py-1.5 text-sm hover:bg-recess"
+					>
+						{#if link.icon && failedLinkIcons[link.url] !== link.icon}
+							<img
+								src={link.icon}
+								alt=""
+								width="16"
+								height="16"
+								class="size-4 shrink-0 rounded-sm object-contain"
+								loading="lazy"
+								decoding="async"
+								referrerpolicy="no-referrer"
+								onerror={() => (failedLinkIcons[link.url] = link.icon ?? '')}
+							/>
+						{/if}
+						<span class="min-w-0 wrap-anywhere">{link.title || new URL(link.url).hostname}</span>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</section>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import { type ProfileData } from '../social/profile.js';
+import { type PreferredSocialClient } from '../social/preferred-client.js';
+export type UserProfileProps = {
+    profile: ProfileData;
+    /** The viewer's choice, not the profile owner's. Defaults to Bluesky. */
+    socialClient?: PreferredSocialClient | null;
+    /** Route bio mentions to an app-owned profile instead of the social client. */
+    mentionUrl?: (identifier: string) => string;
+    actions?: Snippet;
+    /** App-owned metrics replace the default Bluesky counts, including an empty array. */
+    metrics?: {
+        label: string;
+        value: number;
+    }[];
+    class?: string;
+};
+declare const UserProfile: import("svelte").Component<UserProfileProps, {}, "">;
+type UserProfile = ReturnType<typeof UserProfile>;
+export default UserProfile;

package/dist/grain/types.d.ts

@@ -0,0 +1,41 @@
+export type GrainReference = {
+    actor: string;
+    rkey: string;
+    atUri: string;
+    url: string;
+};
+export type GrainAlbum = {
+    uri: string;
+    url: string;
+    title: string;
+    creator: {
+        did: string;
+        handle: string;
+        displayName?: string;
+    };
+    photoCount: number;
+    cover?: string;
+    contentWarning: boolean;
+};
+export type GrainPhoto = {
+    uri: string;
+    thumb: string;
+    fullsize: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    contentWarning: boolean;
+};
+export type GrainGallery = GrainAlbum & {
+    photos: GrainPhoto[];
+};
+export type GrainAlbumPage = {
+    albums: GrainAlbum[];
+    cursor?: string;
+};
+/** Normalized public reads. Implement with Grain XRPC today, or atmo.pics/Contrail later. */
+export type GrainClient = {
+    getGallery(reference: string): Promise<GrainGallery>;
+    listAlbums(actor: string, cursor?: string): Promise<GrainAlbumPage>;
+};
+export type GrainSelection = (album: GrainAlbum) => void | string | Promise<void | string>;

package/dist/grain/types.js

@@ -0,0 +1 @@
+export {};

package/dist/grain/urls.d.ts

@@ -0,0 +1,7 @@
+import type { GrainReference } from './types.js';
+export declare function isLinkedActor(value: string): boolean;
+export declare function parseGrainLink(input: string): GrainReference | null;
+export declare function parseStreamplaceLink(input: string): {
+    actor: string;
+    url: string;
+} | null;

package/dist/grain/urls.js

@@ -0,0 +1,74 @@
+export function isLinkedActor(value) {
+    if (value.length > 253)
+        return false;
+    return (/^did:[a-z]+:[A-Za-z0-9._:%-]+$/.test(value) ||
+        /^(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z][a-zA-Z0-9-]*$/.test(value));
+}
+export function parseGrainLink(input) {
+    try {
+        const raw = input.trim();
+        let actor;
+        let rkey;
+        if (raw.startsWith('at://')) {
+            const match = /^at:\/\/([^/]+)\/social\.grain\.gallery\/([^/?#]+)$/.exec(raw);
+            if (!match)
+                return null;
+            [, actor, rkey] = match;
+        }
+        else {
+            const url = new URL(/^grain\.social\//i.test(raw) ? `https://${raw}` : raw);
+            if (!['https:', 'http:'].includes(url.protocol) ||
+                url.hostname !== 'grain.social' ||
+                url.username ||
+                url.password ||
+                url.port)
+                return null;
+            const match = /^\/profile\/([^/]+)\/gallery\/([^/]+)\/?$/.exec(url.pathname);
+            if (!match)
+                return null;
+            actor = decodeURIComponent(match[1]);
+            rkey = decodeURIComponent(match[2]);
+        }
+        if (!isLinkedActor(actor) ||
+            !/^[A-Za-z0-9._~:-]{1,512}$/.test(rkey) ||
+            ['.', '..'].includes(rkey))
+            return null;
+        if (!actor.startsWith('did:'))
+            actor = actor.toLowerCase();
+        return {
+            actor,
+            rkey,
+            atUri: `at://${actor}/social.grain.gallery/${rkey}`,
+            url: `https://grain.social/profile/${actor.replaceAll('%', '%25')}/gallery/${rkey}`
+        };
+    }
+    catch {
+        return null;
+    }
+}
+export function parseStreamplaceLink(input) {
+    try {
+        let actor = input.trim().replace(/^@/, '');
+        if (/^(?:https?:\/\/|stream\.place\/)/i.test(actor)) {
+            const url = new URL(/^stream\.place\//i.test(actor) ? `https://${actor}` : actor);
+            if (!['https:', 'http:'].includes(url.protocol) ||
+                url.hostname !== 'stream.place' ||
+                url.username ||
+                url.password ||
+                url.port)
+                return null;
+            const match = /^\/([^/]+)\/?$/.exec(url.pathname);
+            if (!match)
+                return null;
+            actor = decodeURIComponent(match[1]);
+        }
+        if (!isLinkedActor(actor))
+            return null;
+        if (!actor.startsWith('did:'))
+            actor = actor.toLowerCase();
+        return { actor, url: `https://stream.place/${actor.replaceAll('%', '%25')}` };
+    }
+    catch {
+        return null;
+    }
+}

package/dist/grain/xrpc.d.ts

@@ -0,0 +1,3 @@
+import type { GrainClient } from './types.js';
+/** Current Grain.social XRPC implementation; not a configurable proxy or an app session. */
+export declare function createGrainXrpcClient(fetchImpl?: typeof fetch): GrainClient;

package/dist/grain/xrpc.js

@@ -0,0 +1,129 @@
+import { isLinkedActor, parseGrainLink } from './urls.js';
+// Grain's unspecced API is deliberately isolated here; never proxy a user-supplied host.
+const ORIGIN = 'https://grain.social';
+function object(value) {
+    return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+}
+function text(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+function image(value) {
+    try {
+        const url = new URL(text(value));
+        return url.protocol === 'https:' &&
+            url.hostname === 'cdn.grain.social' &&
+            !url.username &&
+            !url.password &&
+            !url.port
+            ? url.href
+            : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function warned(value) {
+    if (value == null)
+        return false;
+    if (typeof value === 'string')
+        return value.length > 0;
+    const labels = Array.isArray(value) ? value : object(value).values;
+    // Unknown nonempty label shapes are treated conservatively too.
+    if (!Array.isArray(labels))
+        return Object.keys(object(value)).length > 0;
+    return labels.some((label) => object(label).neg !== true);
+}
+function photo(value) {
+    const p = object(value);
+    const thumb = image(p.thumb), fullsize = image(p.fullsize);
+    if (!thumb || !fullsize || !text(p.uri).startsWith('at://'))
+        return null;
+    const ratio = object(p.aspectRatio);
+    return {
+        uri: text(p.uri),
+        thumb,
+        fullsize,
+        alt: text(p.alt),
+        ...(typeof ratio.width === 'number' && ratio.width > 0 ? { width: ratio.width } : {}),
+        ...(typeof ratio.height === 'number' && ratio.height > 0 ? { height: ratio.height } : {}),
+        contentWarning: warned(p.labels) || warned(object(p.record).labels)
+    };
+}
+function album(value) {
+    const g = object(value), record = object(g.record), creator = object(g.creator);
+    const ref = parseGrainLink(text(g.uri));
+    const did = text(creator.did);
+    if (!ref ||
+        !ref.actor.startsWith('did:') ||
+        ref.actor !== did ||
+        !isLinkedActor(did) ||
+        !Array.isArray(g.items)) {
+        throw new Error('Invalid Grain gallery');
+    }
+    const contentWarning = warned(record.labels) || warned(g.labels) || warned(creator.labels);
+    const cover = g.items.map(photo).find((p) => p && !p.contentWarning)?.thumb;
+    return {
+        uri: ref.atUri,
+        url: ref.url,
+        title: text(g.title, text(record.title, 'Untitled album')),
+        creator: {
+            did,
+            handle: text(creator.handle, did),
+            displayName: text(creator.displayName) || undefined
+        },
+        photoCount: g.items.length,
+        contentWarning,
+        ...(!contentWarning && cover ? { cover } : {})
+    };
+}
+/** Current Grain.social XRPC implementation; not a configurable proxy or an app session. */
+export function createGrainXrpcClient(fetchImpl = fetch) {
+    async function request(method, params) {
+        const url = new URL(`/xrpc/${method}`, ORIGIN);
+        url.search = new URLSearchParams(params).toString();
+        const response = await fetchImpl(url, {
+            headers: { accept: 'application/json' },
+            signal: AbortSignal.timeout(5000),
+            redirect: 'error'
+        });
+        if (!response.ok)
+            throw new Error(`Grain unavailable (${response.status})`);
+        return object(await response.json());
+    }
+    return {
+        async getGallery(reference) {
+            const ref = parseGrainLink(reference);
+            if (!ref)
+                throw new Error('Invalid Grain reference');
+            const data = await request('social.grain.unspecced.getGallery', { gallery: ref.atUri });
+            const result = album(data.gallery);
+            const canonical = parseGrainLink(result.uri);
+            if (canonical.rkey !== ref.rkey ||
+                (ref.actor.startsWith('did:') && canonical.actor !== ref.actor))
+                throw new Error('Mismatched Grain gallery');
+            const photos = object(data.gallery).items
+                .map(photo)
+                .filter((p) => p !== null);
+            return { ...result, photos };
+        },
+        async listAlbums(actor, cursor) {
+            if (!isLinkedActor(actor))
+                throw new Error('Invalid actor');
+            const data = await request('dev.hatk.getFeed', {
+                feed: 'actor',
+                actor,
+                limit: '24',
+                ...(cursor ? { cursor } : {})
+            });
+            if (!Array.isArray(data.items))
+                throw new Error('Invalid Grain feed');
+            const albums = data.items
+                .map(album)
+                .filter((g) => !actor.startsWith('did:') || g.creator.did === actor);
+            return {
+                albums,
+                ...(typeof data.cursor === 'string' && data.cursor ? { cursor: data.cursor } : {})
+            };
+        }
+    };
+}

package/dist/grain.d.ts

@@ -0,0 +1,3 @@
+export type { GrainClient, GrainAlbum, GrainGallery, GrainPhoto, GrainAlbumPage, GrainReference, GrainSelection } from './grain/types.js';
+export { parseGrainLink, isLinkedActor } from './grain/urls.js';
+export { createGrainXrpcClient } from './grain/xrpc.js';

package/dist/grain.js

@@ -0,0 +1,2 @@
+export { parseGrainLink, isLinkedActor } from './grain/urls.js';
+export { createGrainXrpcClient } from './grain/xrpc.js';

package/dist/index.d.ts

@@ -5,6 +5,9 @@ export { default as Input } from './components/Input.svelte';
 export type { InputProps } from './components/Input.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
 export { default as Select } from './components/Select.svelte';
+export { default as SocialClientPicker } from './components/SocialClientPicker.svelte';
+export type { SocialClientPickerProps } from './components/SocialClientPicker.svelte';
+export * from './social.js';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as Label } from './components/Label.svelte';
 export { default as PageTitle } from './components/PageTitle.svelte';
@@ -12,6 +15,23 @@ export { default as Heading } from './components/Heading.svelte';
 export { default as Subheading } from './components/Subheading.svelte';
 export { default as Surface } from './components/Surface.svelte';
 export { default as Avatar } from './components/Avatar.svelte';
+export { default as UserProfile } from './components/UserProfile.svelte';
+export type { UserProfileProps } from './components/UserProfile.svelte';
+export { blueskyProfileToProfileData } from './social/profile.js';
+export type { ProfileData, ProfileLink } from './social/profile.js';
+export { default as PhotoLightbox } from './components/PhotoLightbox.svelte';
+export type { PhotoLightboxProps } from './components/PhotoLightbox.svelte';
+export { default as PhotoGrid } from './components/PhotoGrid.svelte';
+export type { PhotoGridProps } from './components/PhotoGrid.svelte';
+export type { Photo } from './media.js';
+export { default as GrainAlbumPicker } from './components/GrainAlbumPicker.svelte';
+export type { GrainAlbumPickerProps } from './components/GrainAlbumPicker.svelte';
+export { default as GrainAlbumView } from './components/GrainAlbumView.svelte';
+export type { GrainAlbumViewProps } from './components/GrainAlbumView.svelte';
+export { default as StreamplacePicker } from './components/StreamplacePicker.svelte';
+export type { StreamplacePickerProps } from './components/StreamplacePicker.svelte';
+export * from './grain.js';
+export * from './streamplace.js';
 export { default as InsetImage } from './components/InsetImage.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Modal } from './components/Modal.svelte';
@@ -53,6 +73,9 @@ export { default as InlineEditor } from './components/InlineEditor.svelte';
 export { default as PostComposer } from './components/PostComposer.svelte';
 export { default as NestedComments } from './components/NestedComments.svelte';
 export { default as PostContent } from './components/PostContent.svelte';
+export { default as ExternalEmbed } from './components/ExternalEmbed.svelte';
+export { defaultExternalEmbedProviders, youtubeEmbedProvider, klipyEmbedProvider, resolveExternalEmbed } from './social/external-embeds.js';
+export type { ExternalPostEmbed, ExternalEmbedProvider, ExternalEmbedPlayer } from './social/external-embeds.js';
 export { blueskyPostToPostData } from './social/posts.js';
 export type { PostData, PostEmbed, BlueskyPostView } from './social/posts.js';
 export { editorJsonToBlueskyPost, textToDoc, graphemeLength } from './social/richtext.js';