@atmo-dev/kit 0.0.0-stage → 0.0.2

package/dist/components/InlineEditor.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { onMount, untrack } from 'svelte';
+	import { Editor, type JSONContent } from '@tiptap/core';
+	import Document from '@tiptap/extension-document';
+	import Paragraph from '@tiptap/extension-paragraph';
+	import Text from '@tiptap/extension-text';
+	import HardBreak from '@tiptap/extension-hard-break';
+	import History from '@tiptap/extension-history';
+	import Placeholder from '@tiptap/extension-placeholder';
+	import Mention from '@tiptap/extension-mention';
+	import type { ActorSearch } from './login/types.js';
+	import { mentionSuggestions } from '../social/mention-suggestions.js';
+	import { editorJsonToBlueskyPost, textToDoc } from '../social/richtext.js';
+	import { cn } from '../utils.js';
+	let {
+		value = $bindable(''),
+		editor = $bindable<Editor | null>(null),
+		label,
+		placeholder = '',
+		singleLine = false,
+		disabled = false,
+		searchActors,
+		onupdate,
+		class: className
+	}: {
+		value?: string;
+		editor?: Editor | null;
+		label: string;
+		placeholder?: string;
+		singleLine?: boolean;
+		disabled?: boolean;
+		searchActors?: ActorSearch;
+		onupdate?: (content: { text: string; json: JSONContent }) => void;
+		class?: string;
+	} = $props();
+	const id = $props.id();
+	let host: HTMLDivElement;
+	let element: HTMLDivElement;
+	onMount(() => {
+		const instance = new Editor({
+			element,
+			extensions: [
+				Document,
+				Paragraph,
+				Text,
+				HardBreak,
+				History,
+				Placeholder.configure({ placeholder }),
+				...(searchActors
+					? [
+							Mention.configure({
+								HTMLAttributes: { class: 'text-action' },
+								suggestion: mentionSuggestions(searchActors, () => host)
+							})
+						]
+					: [])
+			],
+			content: textToDoc(untrack(() => value)),
+			editable: !disabled,
+			editorProps: {
+				attributes: {
+					id,
+					role: searchActors ? 'combobox' : 'textbox',
+					'aria-label': label,
+					...(searchActors
+						? { 'aria-autocomplete': 'list', 'aria-expanded': 'false', 'aria-haspopup': 'listbox' }
+						: { 'aria-multiline': String(!singleLine) }),
+					class:
+						'min-h-[1.5em] outline-none whitespace-pre-wrap break-words [&_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&_p.is-editor-empty:first-child]:before:text-muted [&_p.is-editor-empty:first-child]:before:float-left [&_p.is-editor-empty:first-child]:before:pointer-events-none [&_p.is-editor-empty:first-child]:before:h-0'
+				},
+				handleKeyDown: (view, event) =>
+					singleLine &&
+					event.key === 'Enter' &&
+					!event.isComposing &&
+					!view.dom.getAttribute('aria-activedescendant'),
+				transformPastedText: (text) => (singleLine ? text.replace(/[\r\n]+/g, ' ') : text),
+				// Accept plain text only, preserving the editor's deliberately small schema.
+				handlePaste: (_view, event) => {
+					const text = event.clipboardData?.getData('text/plain');
+					if (text === undefined) return false;
+					event.preventDefault();
+					if (singleLine) {
+						const cleaned = text.replace(/[\r\n]+/g, ' ');
+						if (cleaned) instance.commands.insertContent({ type: 'text', text: cleaned });
+					} else instance.commands.insertContent(textToDoc(text).content ?? []);
+					return true;
+				}
+			},
+			onUpdate: ({ editor: current }) => {
+				const json = current.getJSON();
+				value = editorJsonToBlueskyPost(json).text;
+				onupdate?.({ text: value, json });
+			}
+		});
+		editor = instance;
+		return () => {
+			instance.destroy();
+			editor = null;
+		};
+	});
+	$effect(() => {
+		if (editor && editorJsonToBlueskyPost(editor.getJSON()).text !== value)
+			editor.commands.setContent(textToDoc(value), { emitUpdate: false });
+	});
+	$effect(() => {
+		editor?.setEditable(!disabled, false);
+		editor?.view.dom.setAttribute('aria-disabled', String(disabled));
+	});
+</script>
+
+<div
+	bind:this={host}
+	class={cn(
+		'relative min-w-0 rounded-sm focus-within:outline-2 focus-within:outline-offset-4 focus-within:outline-focus',
+		className
+	)}
+	data-slot="inline-editor"
+>
+	<div bind:this={element}></div>
+</div>

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

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

package/dist/components/Input.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	export type InputProps = Omit<HTMLInputAttributes, 'type' | 'value'> & {
+		type?: Exclude<
+			HTMLInputTypeAttribute,
+			'checkbox' | 'radio' | 'file' | 'button' | 'submit' | 'reset' | 'image' | 'range'
+		>;
+		value?: string | number;
+		ref?: HTMLInputElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { cn } from '../utils.js';
+	import { control } from '../styles.js';
+	let {
+		class: className,
+		value = $bindable<string | number | undefined>(''),
+		type = 'text',
+		ref = $bindable(null),
+		...rest
+	}: InputProps = $props();
+</script>
+
+<input
+	{...rest}
+	{type}
+	bind:value
+	bind:this={ref}
+	data-slot="input"
+	class={cn(control, className)}
+/>

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

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+export type InputProps = Omit<HTMLInputAttributes, 'type' | 'value'> & {
+    type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file' | 'button' | 'submit' | 'reset' | 'image' | 'range'>;
+    value?: string | number;
+    ref?: HTMLInputElement | null;
+};
+declare const Input: import("svelte").Component<InputProps, {}, "value" | "ref">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/InsetImage.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	let {
+		src,
+		alt,
+		ratio = 1,
+		class: className,
+		style,
+		loading = 'lazy',
+		...rest
+	}: Omit<HTMLImgAttributes, 'src' | 'alt'> & {
+		src: string;
+		alt: string;
+		ratio?: number | string;
+	} = $props();
+</script>
+
+<figure
+	class={cn(
+		'relative m-0 aspect-(--ak-image-ratio) overflow-hidden rounded-ui border border-line after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_2px_7px_#0005]',
+		className
+	)}
+	{style}
+	style:--ak-image-ratio={ratio}
+	data-slot="inset-image"
+>
+	<img {...rest} {src} {alt} {loading} class="block size-full object-cover" />
+</figure>

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

@@ -0,0 +1,9 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLImgAttributes, 'src' | 'alt'> & {
+    src: string;
+    alt: string;
+    ratio?: number | string;
+};
+declare const InsetImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type InsetImage = ReturnType<typeof InsetImage>;
+export default InsetImage;

package/dist/components/Label.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	let {
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: HTMLLabelAttributes & { ref?: HTMLLabelElement | null } = $props();
+</script>
+
+<label
+	{...rest}
+	bind:this={ref}
+	class={cn(
+		'inline-flex items-center gap-2.5 text-[.8125rem] leading-normal font-medium text-ink',
+		className
+	)}>{@render children?.()}</label
+>

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

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

package/dist/components/LinkCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	import { safeWebUrl } from '../social/richtext.js';
+	let {
+		href,
+		meta,
+		class: className,
+		...rest
+	}: Omit<HTMLAnchorAttributes, 'href' | 'children'> & {
+		href: string;
+		meta: { title?: string; description?: string; image?: string };
+	} = $props();
+</script>
+
+<a
+	{...rest}
+	href={safeWebUrl(href)}
+	target="_blank"
+	rel="noopener noreferrer"
+	class={cn(
+		'block overflow-hidden rounded-ui border border-line bg-surface text-ink no-underline hover:border-control-line',
+		focus,
+		className
+	)}
+>
+	{#if meta.image && safeWebUrl(meta.image)}<div class="relative">
+			<img
+				src={meta.image}
+				alt=""
+				class="aspect-[1.91/1] w-full object-cover"
+				loading="lazy"
+			/><span
+				class="pointer-events-none absolute inset-0 [box-shadow:inset_0_0_0_1px_var(--ui-shadow),inset_0_2px_5px_var(--ui-shadow)]"
+			></span>
+		</div>{/if}
+	<div class="p-3">
+		<strong class="block text-sm font-medium">{meta.title || href}</strong>
+		{#if meta.description}<p class="mt-1 line-clamp-2 text-xs leading-relaxed text-muted">
+				{meta.description}
+			</p>{/if}
+		<span class="mt-1 block truncate text-[.6875rem] text-muted"
+			>{href.replace(/^https?:\/\//, '')}</span
+		>
+	</div>
+</a>

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

@@ -0,0 +1,12 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAnchorAttributes, 'href' | 'children'> & {
+    href: string;
+    meta: {
+        title?: string;
+        description?: string;
+        image?: string;
+    };
+};
+declare const LinkCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinkCard = ReturnType<typeof LinkCard>;
+export default LinkCard;

package/dist/components/Modal.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Dialog as Primitive } from 'bits-ui';
+	import Icon from './Icon.svelte';
+	import { X } from '@sketchyicons/svelte';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	import { readTheme, observeTheme } from '../theme.js';
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		dismissible = true,
+		class: className,
+		style,
+		children,
+		onOpenAutoFocus,
+		...rest
+	}: Omit<Primitive.ContentProps, 'children' | 'child' | 'title'> & {
+		open?: boolean;
+		title: string;
+		description?: string;
+		dismissible?: boolean;
+		children?: Snippet;
+	} = $props();
+	let origin = $state<HTMLSpanElement>();
+	let content = $state<HTMLElement | null>(null);
+	let inherited = $state('');
+	$effect(() => {
+		if (!open || !origin) {
+			inherited = '';
+			return;
+		}
+		const element = origin;
+		const sync = () => (inherited = readTheme(element));
+		sync();
+		return observeTheme(element, sync);
+	});
+</script>
+
+<span hidden bind:this={origin} class={cn('atmo-theme', className)} {style}></span>
+<Primitive.Root bind:open>
+	{#if inherited}<Primitive.Portal>
+			<Primitive.Overlay class="fixed inset-0 z-50 bg-black/55" />
+			<Primitive.Content
+				{...rest}
+				bind:ref={content}
+				interactOutsideBehavior={dismissible ? 'close' : 'ignore'}
+				escapeKeydownBehavior={dismissible ? 'close' : 'ignore'}
+				style={[inherited, style].filter(Boolean).join(';')}
+				class={cn(
+					'fixed top-1/2 left-1/2 z-50 max-h-[calc(100dvh-3rem)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-panel border border-line bg-page p-6 font-sans text-ink outline-none sm:p-7',
+					className
+				)}
+				onOpenAutoFocus={(event) => {
+					onOpenAutoFocus?.(event);
+					if (!event.defaultPrevented) {
+						const target = content?.querySelector<HTMLElement>('[data-autofocus]');
+						if (target) {
+							event.preventDefault();
+							target.focus();
+						}
+					}
+				}}
+			>
+				<header class="mb-6 flex items-start justify-between gap-4">
+					<div class="min-w-0 flex-1">
+						<Primitive.Title>
+							{#snippet child({ props })}<h2
+									{...props}
+									tabindex="-1"
+									class="text-[1.375rem] leading-snug font-medium tracking-tight break-words outline-none"
+								>
+									{title}
+								</h2>{/snippet}
+						</Primitive.Title>{#if description}<Primitive.Description
+								class="mt-2.5 text-[.8125rem] leading-relaxed text-muted"
+								>{description}</Primitive.Description
+							>{/if}
+					</div>
+					<Primitive.Close
+						disabled={!dismissible}
+						aria-label="Close dialog"
+						class={cn(
+							'-mt-1 -mr-2 inline-grid size-9 shrink-0 cursor-pointer place-items-center rounded-ui text-muted hover:bg-recess hover:text-ink disabled:pointer-events-none disabled:opacity-40',
+							focus
+						)}><Icon img={X} size={19} /></Primitive.Close
+					>
+				</header>
+				{@render children?.()}
+			</Primitive.Content>
+		</Primitive.Portal>{/if}
+</Primitive.Root>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { Dialog as Primitive } from 'bits-ui';
+type $$ComponentProps = Omit<Primitive.ContentProps, 'children' | 'child' | 'title'> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    dismissible?: boolean;
+    children?: Snippet;
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

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/PageTitle.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	let {
+		title,
+		siteName,
+		separator = ' — '
+	}: {
+		title?: string | null;
+		siteName: string;
+		separator?: string;
+	} = $props();
+
+	let normalizedTitle = $derived(title?.trim());
+	let pageTitle = $derived(
+		!normalizedTitle || normalizedTitle === siteName
+			? siteName
+			: `${normalizedTitle}${separator}${siteName}`
+	);
+</script>
+
+<svelte:head>
+	<title>{pageTitle}</title>
+</svelte:head>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    title?: string | null;
+    siteName: string;
+    separator?: string;
+};
+declare const PageTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageTitle = ReturnType<typeof PageTitle>;
+export default PageTitle;

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;