@atmo-dev/kit 0.0.0-stage → 0.0.1

package/dist/components/NestedComments.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { PostData } from '../social/posts.js';
+	import { safeWebUrl } from '../social/richtext.js';
+	import Avatar from './Avatar.svelte';
+	import PostContent from './PostContent.svelte';
+	import NestedComments from './NestedComments.svelte';
+	let { comments }: { comments: PostData[] } = $props();
+</script>
+
+<div class="space-y-6" data-slot="comments">
+	{#each comments as comment (comment.uri)}
+		<article class="min-w-0">
+			<div class="flex items-start gap-3">
+				<a
+					href={`https://bsky.app/profile/${encodeURIComponent(comment.author.did)}`}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="shrink-0"
+					><Avatar name={comment.author.name} src={comment.author.avatar} size={32} /></a
+				>
+				<div class="min-w-0 flex-1">
+					<div class="mb-1 flex flex-wrap items-baseline gap-x-2 text-xs">
+						<a
+							href={safeWebUrl(comment.href)}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="font-medium text-ink hover:underline">{comment.author.name}</a
+						><span class="truncate text-muted">@{comment.author.handle}</span
+						>{#if comment.createdAt && !Number.isNaN(Date.parse(comment.createdAt))}<time
+								datetime={comment.createdAt}
+								class="text-[.6875rem] text-muted"
+								>{new Date(comment.createdAt).toLocaleDateString(undefined, {
+									month: 'short',
+									day: 'numeric'
+								})}</time
+							>{/if}
+					</div>
+					<PostContent post={comment} />
+					<div class="mt-2 flex gap-5 text-[.6875rem] text-muted">
+						<a
+							href={safeWebUrl(comment.href)}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="hover:text-action"
+							>Reply{#if comment.replyCount}
+								· {comment.replyCount}{/if}</a
+						><a
+							href={safeWebUrl(comment.href)}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="hover:text-action">{comment.likeCount ?? 0} likes</a
+						>
+					</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} />
+				</div>{/if}
+		</article>
+	{/each}
+</div>

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

@@ -0,0 +1,8 @@
+import type { PostData } from '../social/posts.js';
+import NestedComments from './NestedComments.svelte';
+type $$ComponentProps = {
+    comments: PostData[];
+};
+declare const NestedComments: import("svelte").Component<$$ComponentProps, {}, "">;
+type NestedComments = ReturnType<typeof NestedComments>;
+export default NestedComments;

package/dist/components/Popover.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Popover as Primitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn } from '../utils.js';
+	import { readTheme, observeTheme } from '../theme.js';
+	let {
+		open = $bindable(false),
+		trigger,
+		children,
+		class: className,
+		style,
+		role = 'dialog',
+		sideOffset = 8,
+		...rest
+	}: Omit<Primitive.ContentProps, 'children' | 'child'> & {
+		open?: boolean;
+		trigger: Snippet<[{ props: Record<string, unknown> }]>;
+		children?: Snippet;
+	} = $props();
+	let origin = $state<HTMLSpanElement>();
+	let inherited = $state('');
+	$effect(() => {
+		if (!open || !origin) return;
+		const sync = () => (inherited = readTheme(origin!));
+		sync();
+		return observeTheme(origin, sync);
+	});
+</script>
+
+<span hidden bind:this={origin} class={cn('atmo-theme', className)} {style}></span>
+<Primitive.Root bind:open>
+	<Primitive.Trigger
+		>{#snippet child({ props })}{@render trigger({ props })}{/snippet}</Primitive.Trigger
+	>
+	<Primitive.Portal>
+		<Primitive.Content
+			{...rest}
+			{role}
+			{sideOffset}
+			style={[inherited, style].filter(Boolean).join(';')}
+			class={cn(
+				'z-50 max-w-[calc(100vw-2rem)] rounded-panel border border-line bg-page p-4 font-sans text-ink outline-none',
+				className
+			)}
+		>
+			{@render children?.()}
+		</Primitive.Content>
+	</Primitive.Portal>
+</Primitive.Root>

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

@@ -0,0 +1,12 @@
+import { Popover as Primitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = Omit<Primitive.ContentProps, 'children' | 'child'> & {
+    open?: boolean;
+    trigger: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    children?: Snippet;
+};
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/PostComposer.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Editor, JSONContent } from '@tiptap/core';
+	import InlineEditor from './InlineEditor.svelte';
+	import type { ActorSearch } from './login/types.js';
+	import { graphemeLength } from '../social/richtext.js';
+	let {
+		value = $bindable(''),
+		editor = $bindable<Editor | null>(null),
+		searchActors,
+		maxLength = 300,
+		disabled = false,
+		onupdate
+	}: {
+		value?: string;
+		editor?: Editor | null;
+		searchActors?: ActorSearch;
+		maxLength?: number;
+		disabled?: boolean;
+		onupdate?: (content: { text: string; json: JSONContent }) => void;
+	} = $props();
+	let length = $derived(graphemeLength(value));
+</script>
+
+<InlineEditor
+	bind:value
+	bind:editor
+	label="Post text"
+	placeholder="What’s happening?"
+	{searchActors}
+	{disabled}
+	{onupdate}
+	class="min-h-24 text-sm leading-relaxed"
+/>
+<p
+	class={length > maxLength
+		? 'red mt-2 text-right text-xs text-action'
+		: 'mt-2 text-right text-xs text-muted'}
+	aria-live="polite"
+>
+	{length} / {maxLength}
+</p>

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

@@ -0,0 +1,16 @@
+import type { Editor, JSONContent } from '@tiptap/core';
+import type { ActorSearch } from './login/types.js';
+type $$ComponentProps = {
+    value?: string;
+    editor?: Editor | null;
+    searchActors?: ActorSearch;
+    maxLength?: number;
+    disabled?: boolean;
+    onupdate?: (content: {
+        text: string;
+        json: JSONContent;
+    }) => void;
+};
+declare const PostComposer: import("svelte").Component<$$ComponentProps, {}, "value" | "editor">;
+type PostComposer = ReturnType<typeof PostComposer>;
+export default PostComposer;

package/dist/components/PostContent.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { PostData } from '../social/posts.js';
+	import { richTextSegments, safeWebUrl } from '../social/richtext.js';
+	import LinkCard from './LinkCard.svelte';
+	import PostVideo from './PostVideo.svelte';
+	import PostContent from './PostContent.svelte';
+	let { post }: { post: PostData } = $props();
+</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>
+{#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 }}
+			/>
+		{: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
+						href={safeWebUrl(image.fullsize ?? image.src)}
+						target="_blank"
+						rel="noopener noreferrer"
+						><img
+							src={safeWebUrl(image.src)}
+							alt={image.alt}
+							loading="lazy"
+							width={image.width}
+							height={image.height}
+							class="max-h-80 w-full object-cover"
+							class:aspect-square={embed.images.length > 1}
+						/></a
+					>{/each}
+			</div>
+		{:else if embed.type === 'video'}<PostVideo
+				playlist={embed.playlist}
+				poster={embed.poster}
+				label={embed.alt}
+				href={post.href}
+			/>
+		{:else if embed.type === 'quote'}<div class="rounded-ui border border-line p-3">
+				{#if embed.post}<a
+						href={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
+					</p>{/if}
+			</div>{/if}
+	</div>
+{/each}

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

@@ -0,0 +1,8 @@
+import type { PostData } from '../social/posts.js';
+import PostContent from './PostContent.svelte';
+type $$ComponentProps = {
+    post: PostData;
+};
+declare const PostContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type PostContent = ReturnType<typeof PostContent>;
+export default PostContent;

package/dist/components/PostVideo.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { safeWebUrl } from '../social/richtext.js';
+	import Icon from './Icon.svelte';
+	import { ArrowUpRight } from '@sketchyicons/svelte';
+	let {
+		playlist,
+		poster,
+		label,
+		href
+	}: { playlist: string; poster?: string; label?: string; href: string } = $props();
+	let video = $state<HTMLVideoElement | null>(null);
+	// Writable derived state resets a playback failure when the source changes.
+	let failed = $derived(!safeWebUrl(playlist));
+	$effect(() => {
+		const source = safeWebUrl(playlist),
+			media = video;
+		if (!source || !media || failed) return;
+		let cancelled = false;
+		let destroy: (() => void) | undefined;
+		if (media.canPlayType('application/vnd.apple.mpegurl')) media.src = source;
+		else
+			void import('hls.js')
+				.then(({ default: Hls }) => {
+					if (cancelled) return;
+					if (!Hls.isSupported()) {
+						failed = true;
+						return;
+					}
+					const hls = new Hls({ autoStartLoad: false });
+					hls.loadSource(source);
+					hls.attachMedia(media);
+					const play = () => hls.startLoad();
+					media.addEventListener('play', play);
+					hls.on(Hls.Events.ERROR, (_event, data) => {
+						if (data.fatal && !cancelled) failed = true;
+					});
+					destroy = () => {
+						media.removeEventListener('play', play);
+						hls.destroy();
+					};
+				})
+				.catch(() => {
+					if (!cancelled) failed = true;
+				});
+		return () => {
+			cancelled = true;
+			destroy?.();
+			media.pause();
+			media.removeAttribute('src');
+			media.load();
+		};
+	});
+</script>
+
+{#if !failed}
+	<!-- Bluesky's video view supplies alt text, but no caption track. -->
+	<video
+		bind:this={video}
+		poster={safeWebUrl(poster)}
+		aria-label={label || 'Bluesky video'}
+		controls
+		playsinline
+		preload="none"
+		class="max-h-96 w-full rounded-ui bg-black"
+		onerror={() => (failed = true)}
+	></video>
+{/if}
+<a
+	href={safeWebUrl(href)}
+	target="_blank"
+	rel="noopener noreferrer"
+	class="mt-1 inline-flex items-center gap-1 text-xs text-action hover:underline"
+	>Watch on Bluesky <Icon img={ArrowUpRight} size={14} /></a
+>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    playlist: string;
+    poster?: string;
+    label?: string;
+    href: string;
+};
+declare const PostVideo: import("svelte").Component<$$ComponentProps, {}, "">;
+type PostVideo = ReturnType<typeof PostVideo>;
+export default PostVideo;

package/dist/components/Select.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { control } from '../styles.js';
+	import Icon from './Icon.svelte';
+	import { ChevronDown } from '@sketchyicons/svelte';
+	let {
+		class: className,
+		value = $bindable<string | undefined>(),
+		ref = $bindable(null),
+		children,
+		...rest
+	}: Omit<HTMLSelectAttributes, 'value' | 'multiple'> & {
+		value?: string;
+		multiple?: never;
+		ref?: HTMLSelectElement | null;
+	} = $props();
+</script>
+
+<span class="relative block">
+	<select
+		{...rest}
+		bind:value
+		bind:this={ref}
+		data-slot="select"
+		class={cn(control, 'cursor-pointer appearance-none pr-11', className)}
+		>{@render children?.()}</select
+	>
+	<Icon
+		img={ChevronDown}
+		size={17}
+		class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted"
+	/>
+</span>

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

@@ -0,0 +1,9 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLSelectAttributes, 'value' | 'multiple'> & {
+    value?: string;
+    multiple?: never;
+    ref?: HTMLSelectElement | null;
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Subheading.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	let {
+		class: className,
+		level = 2,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: HTMLAttributes<HTMLHeadingElement> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		ref?: HTMLHeadingElement | null;
+	} = $props();
+</script>
+
+<svelte:element
+	this={`h${level}`}
+	{...rest}
+	bind:this={ref}
+	class={cn('m-0 text-lg leading-snug font-medium tracking-tight text-ink', className)}
+	>{@render children?.()}</svelte:element
+>

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLHeadingElement> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    ref?: HTMLHeadingElement | null;
+};
+declare const Subheading: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Subheading = ReturnType<typeof Subheading>;
+export default Subheading;

package/dist/components/Surface.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	let {
+		class: className,
+		as = 'div',
+		variant = 'recessed',
+		ref = $bindable(null),
+		type,
+		disabled,
+		children,
+		...rest
+	}: HTMLAttributes<HTMLElement> & {
+		as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'button';
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		variant?: 'recessed' | 'plain';
+		ref?: HTMLElement | null;
+	} = $props();
+</script>
+
+<svelte:element
+	this={as}
+	{...rest}
+	type={as === 'button' ? (type ?? 'button') : undefined}
+	disabled={as === 'button' ? disabled : undefined}
+	bind:this={ref}
+	data-slot="surface"
+	class={cn(
+		'rounded-panel p-6 text-ink',
+		variant === 'recessed' && 'border border-line bg-recess shadow-(--ui-recess-shadow)',
+		as === 'button' &&
+			cn(
+				'cursor-pointer touch-manipulation disabled:pointer-events-none disabled:opacity-45',
+				focus
+			),
+		className
+	)}>{@render children?.()}</svelte:element
+>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'button';
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    variant?: 'recessed' | 'plain';
+    ref?: HTMLElement | null;
+};
+declare const Surface: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Surface = ReturnType<typeof Surface>;
+export default Surface;

package/dist/components/Tabs.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	export type TabItem = { value: string; label: string; disabled?: boolean };
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Tabs as Primitive } from 'bits-ui';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	let {
+		items,
+		value = $bindable(''),
+		label,
+		class: className,
+		children,
+		...rest
+	}: Omit<Primitive.RootProps, 'children' | 'child' | 'value'> & {
+		items: readonly TabItem[];
+		value?: string;
+		label: string;
+		children: Snippet<[string]>;
+	} = $props();
+	$effect(() => {
+		if (!items.some((item) => item.value === value && !item.disabled))
+			value = items.find((item) => !item.disabled)?.value ?? '';
+	});
+</script>
+
+<Primitive.Root {...rest} bind:value class={cn('min-w-0', className)}>
+	<Primitive.List
+		aria-label={label}
+		class="flex w-fit max-w-full flex-wrap items-center gap-1 rounded-[12px_14px_11px_13px] border border-line bg-recess p-1 shadow-[inset_0_2px_4px_var(--ui-shadow)]"
+	>
+		{#each items as item (item.value)}<Primitive.Trigger
+				value={item.value}
+				disabled={item.disabled}
+				class={cn(
+					'cursor-pointer rounded-[8px_10px_7px_9px] px-3.5 py-1.75 text-[.8125rem] leading-normal text-muted hover:text-ink disabled:cursor-default disabled:opacity-45 data-[state=active]:bg-surface data-[state=active]:text-ink',
+					focus
+				)}>{item.label}</Primitive.Trigger
+			>{/each}
+	</Primitive.List>
+	{#each items as item (item.value)}<Primitive.Content
+			value={item.value}
+			class={cn('rounded pt-6', focus)}>{@render children(item.value)}</Primitive.Content
+		>{/each}
+</Primitive.Root>

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

@@ -0,0 +1,16 @@
+export type TabItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+import type { Snippet } from 'svelte';
+import { Tabs as Primitive } from 'bits-ui';
+type $$ComponentProps = Omit<Primitive.RootProps, 'children' | 'child' | 'value'> & {
+    items: readonly TabItem[];
+    value?: string;
+    label: string;
+    children: Snippet<[string]>;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/Textarea.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { control } from '../styles.js';
+	let {
+		class: className,
+		value = $bindable(''),
+		ref = $bindable(null),
+		rows = 4,
+		...rest
+	}: HTMLTextareaAttributes & { ref?: HTMLTextAreaElement | null } = $props();
+</script>
+
+<textarea
+	{...rest}
+	{rows}
+	bind:value
+	bind:this={ref}
+	data-slot="textarea"
+	class={cn(control, 'min-h-28 resize-y', className)}></textarea>

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

@@ -0,0 +1,7 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLTextareaAttributes & {
+    ref?: HTMLTextAreaElement | null;
+};
+declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/ToggleGroup.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ToggleGroup } from 'bits-ui';
+	import { cn } from '../utils.js';
+	let {
+		value = $bindable(''),
+		size = 'sm',
+		class: className,
+		children,
+		...rest
+	}: Omit<
+		Extract<ToggleGroup.RootProps, { type: 'single' }>,
+		'type' | 'value' | 'children' | 'child'
+	> & {
+		type?: 'single';
+		value?: string;
+		size?: 'xs' | 'sm';
+		children?: import('svelte').Snippet;
+	} = $props();
+</script>
+
+<ToggleGroup.Root
+	{...rest}
+	type="single"
+	bind:value
+	data-size={size}
+	class={cn(
+		'inline-flex flex-wrap gap-1 rounded-ui bg-recess p-1 [box-shadow:var(--ui-recess-shadow)]',
+		className
+	)}
+>
+	{@render children?.()}
+</ToggleGroup.Root>

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

@@ -0,0 +1,12 @@
+import { ToggleGroup } from 'bits-ui';
+type $$ComponentProps = Omit<Extract<ToggleGroup.RootProps, {
+    type: 'single';
+}>, 'type' | 'value' | 'children' | 'child'> & {
+    type?: 'single';
+    value?: string;
+    size?: 'xs' | 'sm';
+    children?: import('svelte').Snippet;
+};
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/ToggleGroupItem.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { ToggleGroup } from 'bits-ui';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	let {
+		class: className,
+		size = 'sm',
+		children,
+		...rest
+	}: Omit<ToggleGroup.ItemProps, 'children'> & {
+		size?: 'xs' | 'sm';
+		children?: import('svelte').Snippet;
+	} = $props();
+</script>
+
+<ToggleGroup.Item
+	{...rest}
+	class={cn(
+		'cursor-pointer rounded-ui px-3 py-1.5 text-xs font-medium text-muted transition-colors duration-(--atmo-duration) hover:text-ink disabled:pointer-events-none disabled:opacity-45 data-[state=on]:bg-surface data-[state=on]:text-action motion-reduce:transition-none',
+		focus,
+		size === 'xs' && 'px-2 py-1 text-[.6875rem]',
+		className
+	)}
+>
+	{@render children?.()}
+</ToggleGroup.Item>

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

@@ -0,0 +1,8 @@
+import { ToggleGroup } from 'bits-ui';
+type $$ComponentProps = Omit<ToggleGroup.ItemProps, 'children'> & {
+    size?: 'xs' | 'sm';
+    children?: import('svelte').Snippet;
+};
+declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;