@atmo-dev/kit 0.2.1 → 0.4.0

package/dist/index.js

@@ -3,6 +3,8 @@ export { default as IconButton } from './components/IconButton.svelte';
 export { default as Input } 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 * 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';
@@ -10,6 +12,15 @@ 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 { blueskyProfileToProfileData } from './social/profile.js';
+export { default as PhotoLightbox } from './components/PhotoLightbox.svelte';
+export { default as PhotoGrid } from './components/PhotoGrid.svelte';
+export { default as GrainAlbumPicker } from './components/GrainAlbumPicker.svelte';
+export { default as GrainAlbumView } from './components/GrainAlbumView.svelte';
+export { default as StreamplacePicker } 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';
@@ -38,6 +49,8 @@ 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 { blueskyPostToPostData } from './social/posts.js';
 export { editorJsonToBlueskyPost, textToDoc, graphemeLength } from './social/richtext.js';
 export { launchConfetti } from './confetti.js';

package/dist/lexicons/social.atmo.actor.preferredClient.json

@@ -0,0 +1,29 @@
+{
+	"lexicon": 1,
+	"id": "social.atmo.actor.preferredClient",
+	"defs": {
+		"main": {
+			"type": "record",
+			"description": "An actor's public preferred Bluesky-compatible social client. Other preferences belong in separate records.",
+			"key": "literal:self",
+			"record": {
+				"type": "object",
+				"required": ["client"],
+				"properties": {
+					"client": {
+						"type": "string",
+						"description": "The preferred social client. custom requires customUrl.",
+						"knownValues": ["bluesky", "mu", "blacksky", "witchsky", "custom"],
+						"maxLength": 64
+					},
+					"customUrl": {
+						"type": "string",
+						"format": "uri",
+						"maxLength": 2048,
+						"description": "For custom clients only: an absolute HTTP(S) base URL without credentials, query or fragment. Must support /profile/:actor links."
+					}
+				}
+			}
+		}
+	}
+}

package/dist/media.d.ts

@@ -0,0 +1,10 @@
+/** Provider-neutral images; callers own URL validation, hydration and moderation policy. */
+export type Photo = {
+    id?: string;
+    src: string;
+    thumbnail?: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    contentWarning?: boolean;
+};

package/dist/media.js

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

package/dist/social/external-embeds.d.ts

@@ -0,0 +1,39 @@
+import type { PostEmbed } from './posts.js';
+export type ExternalPostEmbed = Extract<PostEmbed, {
+    type: 'external';
+}>;
+/** Iframes are always click-to-load. Providers perform no network IO. */
+export type ExternalEmbedPlayer = {
+    type: 'iframe';
+    src: string;
+    aspectRatio?: number;
+} | {
+    type: 'video';
+    sources: readonly {
+        src: string;
+        type: string;
+    }[];
+    aspectRatio?: number;
+    autoplay?: boolean;
+    controls?: boolean;
+} | {
+    type: 'image';
+    src: string;
+    aspectRatio?: number;
+    autoplay?: boolean;
+};
+export type ExternalEmbedProvider = {
+    id: string;
+    label: string;
+    /** Trusted app-owned code. Return null for unsupported URLs; never return arbitrary embed HTML. */
+    resolve: (url: URL, embed: ExternalPostEmbed) => ExternalEmbedPlayer | null;
+};
+export declare const youtubeEmbedProvider: ExternalEmbedProvider;
+/** Bluesky's Klipy GIF links carry video slugs and dimensions in query parameters. */
+export declare const klipyEmbedProvider: ExternalEmbedProvider;
+/** Ordered, explicit registry. Pass [] to keep all external links as ordinary cards. */
+export declare const defaultExternalEmbedProviders: readonly ExternalEmbedProvider[];
+export declare function resolveExternalEmbed(embed: ExternalPostEmbed, providers?: readonly ExternalEmbedProvider[]): {
+    provider: ExternalEmbedProvider;
+    player: ExternalEmbedPlayer;
+} | null;

package/dist/social/external-embeds.js

@@ -0,0 +1,107 @@
+import { safeWebUrl } from './richtext.js';
+function youtubeStart(value) {
+    if (!value)
+        return 0;
+    if (/^\d+$/.test(value))
+        return Math.min(Number(value), 2147483647);
+    const match = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(value);
+    return match
+        ? Math.min(Number(match[1] ?? 0) * 3600 + Number(match[2] ?? 0) * 60 + Number(match[3] ?? 0), 2147483647)
+        : 0;
+}
+export const youtubeEmbedProvider = {
+    id: 'youtube',
+    label: 'YouTube',
+    resolve(url) {
+        let id;
+        let shorts = false;
+        if (url.hostname === 'youtu.be') {
+            id = /^\/([\w-]{11})\/?$/.exec(url.pathname)?.[1];
+        }
+        else if ([
+            'youtube.com',
+            'www.youtube.com',
+            'm.youtube.com',
+            'www.youtube-nocookie.com',
+            'youtube-nocookie.com'
+        ].includes(url.hostname)) {
+            if (url.pathname === '/watch')
+                id = url.searchParams.get('v') ?? undefined;
+            else {
+                const match = /^\/(shorts|live|embed)\/([\w-]{11})\/?$/.exec(url.pathname);
+                id = match?.[2];
+                shorts = match?.[1] === 'shorts';
+            }
+        }
+        if (!id || !/^[\w-]{11}$/.test(id))
+            return null;
+        const player = new URL(`https://www.youtube-nocookie.com/embed/${id}`);
+        player.searchParams.set('autoplay', '1');
+        const start = youtubeStart(url.searchParams.get('t') ?? url.searchParams.get('start'));
+        if (start)
+            player.searchParams.set('start', String(start));
+        return { type: 'iframe', src: player.href, aspectRatio: shorts ? 9 / 16 : 16 / 9 };
+    }
+};
+/** Bluesky's Klipy GIF links carry video slugs and dimensions in query parameters. */
+export const klipyEmbedProvider = {
+    id: 'klipy',
+    label: 'Klipy',
+    resolve(url) {
+        if (!['static.klipy.com', 'k.gifs.bsky.app'].includes(url.hostname) ||
+            !/^\/ii\/(?:[\w-]+\/)+[\w-]+\.(gif|webp|png|jpe?g|mp4|webm)$/i.test(url.pathname))
+            return null;
+        const width = Number(url.searchParams.get('ww'));
+        const height = Number(url.searchParams.get('hh'));
+        const aspectRatio = Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0
+            ? Math.max(0.25, Math.min(4, width / height))
+            : undefined;
+        // Use the same media proxy as Bluesky; never fetch Klipy metadata or scripts.
+        const src = `https://k.gifs.bsky.app${url.pathname}`;
+        const sources = [];
+        for (const format of ['webm', 'mp4']) {
+            const slug = url.searchParams.get(format);
+            if (slug && /^[\w-]+$/.test(slug))
+                sources.push({ src: src.replace(/[^/]+$/, `${slug}.${format}`), type: `video/${format}` });
+        }
+        if (sources.length)
+            return { type: 'video', sources, aspectRatio, autoplay: true, controls: false };
+        const format = /\.(mp4|webm)$/i.exec(url.pathname)?.[1].toLowerCase();
+        return format
+            ? {
+                type: 'video',
+                sources: [{ src, type: `video/${format}` }],
+                aspectRatio,
+                autoplay: true,
+                controls: false
+            }
+            : { type: 'image', src, aspectRatio, autoplay: true };
+    }
+};
+/** Ordered, explicit registry. Pass [] to keep all external links as ordinary cards. */
+export const defaultExternalEmbedProviders = [
+    youtubeEmbedProvider,
+    klipyEmbedProvider
+];
+export function resolveExternalEmbed(embed, providers = defaultExternalEmbedProviders) {
+    const href = safeWebUrl(embed.uri);
+    if (!href)
+        return null;
+    const url = new URL(href);
+    if (url.port || url.username || url.password)
+        return null;
+    for (const provider of providers) {
+        const player = provider.resolve(new URL(url), embed);
+        if (!player)
+            continue;
+        // Even custom providers cannot inject executable URL schemes.
+        if (player.type === 'video') {
+            if (!player.sources.length || player.sources.some((source) => !safeWebUrl(source.src)))
+                continue;
+        }
+        else if (!safeWebUrl(player.src))
+            continue;
+        return { provider, player };
+    }
+    return null;
+}

package/dist/social/posts.d.ts

@@ -23,6 +23,17 @@ export type PostEmbed = {
     type: 'quote';
     post?: PostData;
     unavailable?: boolean;
+    reason?: 'blocked' | 'detached';
+} | {
+    type: 'record';
+    kind: 'feed' | 'list' | 'starter-pack' | 'labeler';
+    href: string;
+    title: string;
+    description?: string;
+    image?: string;
+    handle?: string;
+} | {
+    type: 'unsupported';
 };
 export type PostData = {
     uri: string;
@@ -37,32 +48,56 @@ export type PostData = {
     facets?: Facet[];
     createdAt?: string;
     replyCount?: number;
+    repostCount?: number;
     likeCount?: number;
     embeds?: PostEmbed[];
     replies?: PostData[];
 };
+type PostRecord = {
+    text?: string;
+    facets?: Facet[];
+    createdAt?: string;
+};
+type ActorView = {
+    did: string;
+    handle: string;
+    displayName?: string;
+    avatar?: string;
+};
 /** The public AppView view shape; no session or network dependency. */
 export type BlueskyPostView = {
     uri: string;
-    author: {
+    author: ActorView;
+    record?: PostRecord;
+    value?: PostRecord;
+    embed?: BlueskyEmbedView;
+    embeds?: BlueskyEmbedView[];
+    replyCount?: number;
+    repostCount?: number;
+    likeCount?: number;
+};
+type RecordView = {
+    $type?: string;
+    uri?: string;
+    author?: {
         did: string;
-        handle: string;
+        handle?: string;
         displayName?: string;
         avatar?: string;
     };
-    record?: {
-        text?: string;
-        facets?: Facet[];
-        createdAt?: string;
-    };
-    value?: {
-        text?: string;
-        facets?: Facet[];
-        createdAt?: string;
-    };
-    embed?: BlueskyEmbedView;
+    creator?: ActorView;
+    value?: PostRecord;
+    record?: unknown;
     embeds?: BlueskyEmbedView[];
+    displayName?: string;
+    name?: string;
+    description?: string;
+    avatar?: string;
+    blocked?: boolean;
+    detached?: boolean;
+    notFound?: boolean;
     replyCount?: number;
+    repostCount?: number;
     likeCount?: number;
 };
 type BlueskyEmbedView = {
@@ -76,6 +111,16 @@ type BlueskyEmbedView = {
             height: number;
         };
     }[];
+    items?: {
+        $type?: string;
+        thumbnail?: string;
+        fullsize?: string;
+        alt?: string;
+        aspectRatio?: {
+            width: number;
+            height: number;
+        };
+    }[];
     external?: {
         uri: string;
         title: string;
@@ -85,10 +130,7 @@ type BlueskyEmbedView = {
     playlist?: string;
     thumbnail?: string;
     alt?: string;
-    record?: BlueskyPostView & {
-        $type?: string;
-        record?: BlueskyPostView;
-    };
+    record?: RecordView;
     media?: BlueskyEmbedView;
 };
 export declare function blueskyPostToPostData(post: BlueskyPostView, depth?: number): PostData;

package/dist/social/posts.js

@@ -1,4 +1,69 @@
+import { isActorIdentifier, isRecordKey } from '@atcute/lexicons/syntax';
 import { blueskyProfileUrl } from './urls.js';
+/** Convert record-view variants without mistaking blocked authors or starter packs for posts. */
+function recordEmbed(record, depth) {
+    const type = record.$type;
+    if (record.blocked || type === 'app.bsky.embed.record#viewBlocked')
+        return { type: 'quote', unavailable: true, reason: 'blocked' };
+    if (record.detached || type === 'app.bsky.embed.record#viewDetached')
+        return { type: 'quote', unavailable: true, reason: 'detached' };
+    if (record.notFound || type === 'app.bsky.embed.record#viewNotFound')
+        return { type: 'quote', unavailable: true };
+    const kind = {
+        'app.bsky.feed.defs#generatorView': 'feed',
+        'app.bsky.graph.defs#listView': 'list',
+        'app.bsky.graph.defs#starterPackViewBasic': 'starter-pack',
+        'app.bsky.labeler.defs#labelerView': 'labeler'
+    };
+    const recordKind = Object.hasOwn(kind, type ?? '') ? kind[type] : undefined;
+    if (recordKind) {
+        const match = /^at:\/\/([^/]+)\/([^/]+)\/([^/]+)$/.exec(record.uri ?? '');
+        if (!match)
+            return { type: 'unsupported' };
+        const [, actor, , rkey] = match;
+        if (!isActorIdentifier(actor) || !isRecordKey(rkey))
+            return { type: 'unsupported' };
+        const details = record.record;
+        const profile = blueskyProfileUrl(actor);
+        const href = recordKind === 'starter-pack'
+            ? `https://bsky.app/starter-pack/${actor}/${encodeURIComponent(rkey)}`
+            : recordKind === 'labeler'
+                ? profile
+                : `${profile}/${recordKind === 'feed' ? 'feed' : 'lists'}/${encodeURIComponent(rkey)}`;
+        return {
+            type: 'record',
+            kind: recordKind,
+            href,
+            title: record.displayName ||
+                record.name ||
+                (typeof details?.name === 'string' && details.name) ||
+                record.creator?.displayName ||
+                record.creator?.handle ||
+                'Untitled',
+            description: record.description ||
+                (typeof details?.description === 'string' ? details.description : undefined),
+            image: record.avatar || (recordKind === 'labeler' ? record.creator?.avatar : undefined),
+            handle: record.creator?.handle
+        };
+    }
+    if (record.uri &&
+        record.author?.handle &&
+        depth < 3 &&
+        (!type || type === 'app.bsky.embed.record#viewRecord')) {
+        return {
+            type: 'quote',
+            post: blueskyPostToPostData({
+                ...record,
+                uri: record.uri,
+                author: { ...record.author, handle: record.author.handle },
+                record: record.record
+            }, depth + 1)
+        };
+    }
+    return type && type !== 'app.bsky.embed.record#viewRecord'
+        ? { type: 'unsupported' }
+        : { type: 'quote', unavailable: true };
+}
 export function blueskyPostToPostData(post, depth = 0) {
     const record = post.record ?? post.value;
     const result = {
@@ -14,11 +79,14 @@ export function blueskyPostToPostData(post, depth = 0) {
         facets: record?.facets,
         createdAt: record?.createdAt,
         replyCount: post.replyCount,
+        repostCount: post.repostCount,
         likeCount: post.likeCount,
         embeds: []
     };
     function add(embed) {
-        if (embed.images)
+        if (embed.media)
+            add(embed.media);
+        if (embed.images) {
             result.embeds.push({
                 type: 'images',
                 images: embed.images.map((image) => ({
@@ -28,7 +96,23 @@ export function blueskyPostToPostData(post, depth = 0) {
                     ...image.aspectRatio
                 }))
             });
-        if (embed.external)
+        }
+        else if (embed.items) {
+            const images = embed.items.filter((item) => item.thumbnail && (!item.$type || item.$type === 'app.bsky.embed.gallery#viewImage'));
+            if (images.length)
+                result.embeds.push({
+                    type: 'images',
+                    images: images.map((image) => ({
+                        src: image.thumbnail,
+                        fullsize: image.fullsize,
+                        alt: image.alt ?? '',
+                        ...image.aspectRatio
+                    }))
+                });
+            if (images.length !== embed.items.length)
+                result.embeds.push({ type: 'unsupported' });
+        }
+        else if (embed.external) {
             result.embeds.push({
                 type: 'external',
                 uri: embed.external.uri,
@@ -36,22 +120,25 @@ export function blueskyPostToPostData(post, depth = 0) {
                 description: embed.external.description,
                 image: embed.external.thumb
             });
-        if (embed.playlist)
+        }
+        else if (embed.playlist) {
             result.embeds.push({
                 type: 'video',
                 playlist: embed.playlist,
                 poster: embed.thumbnail,
                 alt: embed.alt
             });
-        if (embed.media)
-            add(embed.media);
-        if (embed.record && depth < 3) {
-            const quote = embed.record.record ?? embed.record;
-            result.embeds.push({
-                type: 'quote',
-                post: quote.author && quote.uri ? blueskyPostToPostData(quote, depth + 1) : undefined,
-                unavailable: !quote.author
-            });
+        }
+        else if (!embed.record && !embed.media) {
+            result.embeds.push({ type: 'unsupported' });
+        }
+        if (embed.record) {
+            // recordWithMedia wraps an embed.record#view; a plain record embed does not.
+            const quote = embed.record.$type === 'app.bsky.embed.record#view' ||
+                (!embed.record.uri && embed.record.record)
+                ? embed.record.record
+                : embed.record;
+            result.embeds.push(quote ? recordEmbed(quote, depth) : { type: 'quote', unavailable: true });
         }
     }
     for (const embed of post.embeds ?? (post.embed ? [post.embed] : []))

package/dist/social/preferred-client.d.ts

@@ -0,0 +1,36 @@
+/** Public, cross-app social-client selection in the actor's repository. */
+export declare const PREFERRED_CLIENT_COLLECTION = "social.atmo.actor.preferredClient";
+export declare const PREFERRED_CLIENT_RKEY = "self";
+export declare const PREFERRED_CLIENT_SCOPE = "repo:social.atmo.actor.preferredClient?action=create&action=update";
+export declare const socialClients: readonly [{
+    readonly id: "bluesky";
+    readonly label: "Bluesky";
+    readonly url: "https://bsky.app";
+}, {
+    readonly id: "mu";
+    readonly label: "mu";
+    readonly url: "https://mu.social";
+}, {
+    readonly id: "blacksky";
+    readonly label: "Blacksky";
+    readonly url: "https://blacksky.community";
+}, {
+    readonly id: "witchsky";
+    readonly label: "Witchsky";
+    readonly url: "https://witchsky.app";
+}];
+export type SocialClientId = (typeof socialClients)[number]['id'] | 'custom';
+export type PreferredSocialClient = {
+    client: Exclude<SocialClientId, 'custom'>;
+} | {
+    client: 'custom';
+    customUrl: string;
+};
+/** Require an absolute web URL. Keep path prefixes for self-hosted clients. */
+export declare function normalizeSocialClientUrl(value: string): string | null;
+export declare function parsePreferredSocialClient(value: unknown): PreferredSocialClient | null;
+export declare function preferredSocialClientRecord(preference: PreferredSocialClient): Record<string, unknown>;
+export declare function socialClientInfo(preference?: PreferredSocialClient | null): {
+    label: string;
+    url: string;
+};

package/dist/social/preferred-client.js

@@ -0,0 +1,48 @@
+/** Public, cross-app social-client selection in the actor's repository. */
+export const PREFERRED_CLIENT_COLLECTION = 'social.atmo.actor.preferredClient';
+export const PREFERRED_CLIENT_RKEY = 'self';
+export const PREFERRED_CLIENT_SCOPE = `repo:${PREFERRED_CLIENT_COLLECTION}?action=create&action=update`;
+export const socialClients = [
+    { id: 'bluesky', label: 'Bluesky', url: 'https://bsky.app' },
+    { id: 'mu', label: 'mu', url: 'https://mu.social' },
+    { id: 'blacksky', label: 'Blacksky', url: 'https://blacksky.community' },
+    { id: 'witchsky', label: 'Witchsky', url: 'https://witchsky.app' }
+];
+/** Require an absolute web URL. Keep path prefixes for self-hosted clients. */
+export function normalizeSocialClientUrl(value) {
+    try {
+        const url = new URL(value.trim());
+        if (!['https:', 'http:'].includes(url.protocol) || url.username || url.password)
+            return null;
+        if (url.search || url.hash || url.href.length > 2048)
+            return null;
+        return url.href.replace(/\/+$/, '');
+    }
+    catch {
+        return null;
+    }
+}
+export function parsePreferredSocialClient(value) {
+    if (!value || typeof value !== 'object' || !('client' in value))
+        return null;
+    if (value.client === 'custom') {
+        const customUrl = 'customUrl' in value && typeof value.customUrl === 'string'
+            ? normalizeSocialClientUrl(value.customUrl)
+            : null;
+        return customUrl ? { client: 'custom', customUrl } : null;
+    }
+    const client = socialClients.find((client) => client.id === value.client);
+    return client ? { client: client.id } : null;
+}
+export function preferredSocialClientRecord(preference) {
+    const client = parsePreferredSocialClient(preference);
+    if (!client)
+        throw new Error('Choose a client and enter a valid client URL.');
+    return { $type: PREFERRED_CLIENT_COLLECTION, ...client };
+}
+export function socialClientInfo(preference) {
+    const client = parsePreferredSocialClient(preference) ?? { client: 'bluesky' };
+    return client.client === 'custom'
+        ? { label: 'Custom client', url: client.customUrl }
+        : socialClients.find((entry) => entry.id === client.client);
+}

package/dist/social/profile.d.ts

@@ -0,0 +1,36 @@
+import type { PreferredSocialClient } from './preferred-client.js';
+/** Hydrated app.bsky.actor.link data, not the legacy profile.website field. */
+export type ProfileLink = {
+    url: string;
+    title?: string;
+    icon?: string;
+};
+export type ProfileData = {
+    did: string;
+    handle?: string;
+    displayName?: string;
+    avatar?: string;
+    banner?: string;
+    description?: string;
+    pronouns?: string;
+    links?: ProfileLink[];
+    followersCount?: number;
+    followsCount?: number;
+    postsCount?: number;
+    createdAt?: string;
+};
+/** Only web URLs; never accept executable schemes or disguised credentials. */
+export declare function safeProfileUrl(value: string | undefined): string | undefined;
+/** Bios are plain text with detected facets, never HTML or Markdown. No network requests. */
+export type ProfileDescriptionOptions = {
+    socialClient?: PreferredSocialClient | null;
+    /** App-owned mention destination; omit to use the selected social client. */
+    mentionUrl?: (identifier: string) => string;
+};
+export declare function profileDescriptionSegments(text: string, options?: ProfileDescriptionOptions): {
+    text: string;
+    href: string | undefined;
+}[];
+export declare function visibleProfileLinks(links?: ProfileLink[]): ProfileLink[];
+/** Validate public AppView data at the boundary, including newer optional fields. */
+export declare function blueskyProfileToProfileData(value: unknown): ProfileData | undefined;